JavaScript中事件的两种不同调用方法

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38473254/article/details/124914549
版权

1、通过onclick()单击事件调用

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<input type="button" value="test1" id="btn1" onclick="fun1()">
</body>
</html>

JS代码：

function fun1(){
	alert("调用一");
}

网页效果：
在这里插入图片描述

function fun1(){
	alert("hello");
}

function fun2(){
	// 通过对象
	document.getElementById("btn2").onclick=function(){
		alert("world");
	}
}

2、通过onload()加载事件调用

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<!-- onload()页面加载、刷新、初始化执行里面的函数 -->
<body onload="fun2()">
	<input type="button" value="test2" id="btn1">
</body>
</html>

js代码：

function fun2(){
	alert("调用二");
}

网页效果：
在这里插入图片描述

小结

  1. 第一个按钮通过οnclick="fun1()"进行调用
  2. 第二个按钮通过对象ID，在body里面使用οnlοad="fun2()"进行调用
緈福的街口
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中两种链式调用实现代码
12-13
一、方法体内返回对象实例自身(this) 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; },...
Javascript setInterval的两种调用方法(实例讲解)
12-03
如下所示： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<...<head> <title></title>...style type=”text/css”> #main{border:1px solid black;...paddin
学习笔记之JavaScript——知识点（3）
yane的博客
07-30 336
JavaScript 函数语法函数就是包裹在花括号中的代码块，前面使用了关键词 function：function functionname() { 执行代码 }当调用该函数时，会执行函数内的代码。 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。 JavaScript 对大小写敏感。关键词 function 必须是小写的，并且
JavaScript中按钮点击事件的几种实现方式
jsjxyinghan的博客
05-26 9166
对于方法二，一定要把script代码块写在body的尾部，但是如果说硬是要写在head标签内的话，一定要在window.load里面，或者在jq的另一种写法$(document).ready()。这个是代码执行顺序的原因。btn.addEventListener('click',function() {alert('你点击了按钮哦！')},false);alert("你点击了按钮哦！alert("你点击了按钮哦");alert("你点击了按钮哦！
js触发button的点击事件
热门推荐
影子
12-25 5万+
1. $(".tab").click(function () {  }) 2. $(".tab").on("click",function () {  }) 3. $(document).on("click", ".tab",function () {  }) 4. 使用&lt;onclick=""&gt;触发函数   function load(){
js事件触发
zhengying5dvhdg的博客
12-09 1500
js事件，冒泡事件，Event对象，事件委托，移动端事件
js的 事件 使用
hhhohhl的博客
03-16 142
alert('传统方法') } box [ 0 ] . addEventListener('click' , function() {alert('方法监听注册方式') }) //两种方法按照顺序执行 < / script >
js事件使用
hcyhcyhcy_的博客
04-19 404
事件使用方式 <div id="app1" onclick="alert('1')">11</div> <div id="app2" onclick="modify()">22</div> 这里要加（），否则不对， 原生要加()。下面写成modify(){}形式也不行 function modify() { alert('2') } <div id="app3">33
C#-事件的详细用法
qq_52905520的博客
08-11 2926
C#-事件的详细用法
JS的事件介绍
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
一个页面多触发事件需要共用一个接口处理数据，封装回调函数方法回调处理数据
m0_46577631的博客
08-03 128
【代码】一个页面多触发事件需要共用一个接口处理数据，封装回调函数方法回调处理数据。
js点击事件方法
m0_73301498的博客
10-16 565
1、通过方法响应点击事件\n\n\u003Cdiv onclick=\"fn()\" id=\"demo\">点击\u003C/div>\n\nfunction fn(){\n\talert(111)\n}\n1\n2\n3\n4\n5\n2、点击事件\n\n\u003Cdiv id=\"demo\">点击\u003C/div>\n\nvar aDiv=document.getElementById(\"demo\")\naDiv.onclick=function(){\n\tale
使vue实现jQuery调用的两种方法
01-19
如果说vue是前端工程化使用较多的骨架，那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携，无需再过多的考虑DOM的操作。而vue的渐进式开发（逐步引用组件，按需引入），也让许多新手前端...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 415
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1008
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 516
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 303
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 407
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 429
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
1.调用事件处理程序主要分为在JavaScript中调用和在HTML中调用两种。
03-22
回答：是的，调用事件处理程序主要分为在JavaScript中调用和在HTML中调用两种。在JavaScript中调用事件处理程序可以使用addEventListener()方法，而在HTML中调用则可以使用on属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值