JavaScript三种事件绑定的方法和执行顺序

于 2021-06-22 11:49:53 发布
阅读量1.6k 收藏 4
点赞数 2
分类专栏： 前端 # JavaScript 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayUonly/article/details/118102411
版权
本文详细介绍了JavaScript的三种事件绑定方法：HTML标签、DOM事件和addEventListener，并探讨了它们的执行顺序。通过实例代码展示，指出HTML标签绑定在DOM事件和addEventListener之前执行，而addEventListener的绑定会覆盖DOM中的事件。
摘要由CSDN通过智能技术生成

JavaScript三种事件绑定的方法和执行顺序

JavaScript的三种事件绑定方法

事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种：

HTML标签

可以直接在HTML的标签上绑定事件，可以是直接的JavaScript代码，也可以传入一个方法。

首先，直接使用JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input id="testBtn" type="button" value="点击我" onclick="alert('标签内点击')"></input>
</body>
最低0.47元/天 解锁文章
acgCode
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
总结：js中事件的5种使用方式
no_1back_up的博客
08-25 675
以下为onclick的使用技巧，全部经过个人验证，如要转载，请标明出处。 不限于onclick，所有事件都可以这样操作 事件如下： 第一种： 直接在标签中 οnclick="…"，里面写上修改标签属性的语句/输入输出语句 <button onclick="window.alert(window.prompt());this.innerText='9';this.style='background-color:red'">5</button> 开始 按下按钮 5，输入123
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
总之，JavaScript的事件处理是构建动态网页的重要手段，熟练掌握事件绑定、事件冒泡、事件捕获和事件执行顺序能帮助开发者编写更高效、更易于维护的代码。通过实践和不断学习，可以更深入地理解和运用这些概念。
一个DOM元素绑定多个事件时，先执行冒泡还是捕获
weixin_30702887的博客
09-18 157
绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。 一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。 首先来了解一下冒泡和捕获是怎么回事： 1.冒泡 冒泡是从下向上，D...
JS中控制绑定事件执行顺序
热门推荐
hsd2012的专栏
04-11 1万+
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段。这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。直接看下面实例 *{margin:0;padding: 0;} var obj1=document.getElementById('id1'); obj1.addEventListener(
js:window.onload事件详解
weixin_30362233的博客
12-09 254
可能你也碰到过这种情况 , 就是在 js 的代码中用了 window.onload 后 , 可能会影响到 body 中的 onload 事件。你可以全写在 body 中，也可以全放到 window.onload 中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用 window.attachEvent 和 window.addEventListener 来解决一下。 ...
JS事件addEventListener、on、元素属性事件触发的先后顺序
MOONCOM的博客
04-27 5993
三种事件触发方法都存在时示例代码如下：&lt;div id="div1" onclick="ma()"&gt; &lt;/div&gt; &lt;script&gt; var oDiv1=document.getElementById("div1"); oDiv1.addEventListener("click",function(){ console.log(&quo
关于JavaScript中事件绑定的方法总结
10-21
本文总结了JavaScript中事件绑定的几种主要方法，包括在DOM元素中直接绑定、在JavaScript代码中直接绑定以及使用事件监听函数进行绑定。 ### 一、在DOM元素中直接绑定 这是最简单的一种事件绑定方式，直接在HTML...
Javascript 事件流和事件绑定
10-29
JavaScript 事件流和事件绑定是Web开发中关键的交互机制，它们允许用户与网页进行交互。事件流描述了事件在DOM（文档对象模型）中如何传播，而事件绑定则是将特定的行为与这些事件关联起来。 事件流主要有三种类型...
JavaScript实现为事件句柄绑定监听函数的方法分析
10-19
总之，JavaScript的事件绑定涉及到多种方法，包括传统方法、W3C标准方法和IE特有的方法。理解这些方法及其差异是编写兼容性良好的JavaScript代码的关键。同时，跨浏览器的解决方案如`addEvent`和`removeEvent`函数...
JavaScript绑定事件监听函数的通用方法
10-22
首先，事件监听通常可以通过几种不同的方法实现，例如传统绑定方法、W3C标准方法和跨浏览器的方法。然而，为了实现跨浏览器的兼容性，特别是考虑到旧版IE浏览器的差异，我们通常需要一个能够统一处理各种情况的通用...
Button的ontouch,onclick,onLongclick的执行顺序
会微笑的阳光
06-26 986
在Android中，onClick、onLongClick的触发是和ACTION_DOWN及ACTION_UP相关的，在时序上，如果我们在一个View中同时覆写了onClick、onLongClick及onTouchEvent的话，onTouchEvent是最先捕捉到ACTION_DOWN和ACTION_UP事件的，其次才可能触发onClick或者onLongClick。主要的逻辑在View.ja
组件绑定事件与源生事件
qq_38402659的博客
02-24 225
在组件上绑定的事件, 分为两种,一种是监听事件,只能由组件内通过$emit()触发, 另一种,是原生事件,触发在父元素中的方法 想在组件上触发原生事件需要在事件后加.native &lt;div id="app"&gt; &lt;item @click="handleClick"&gt;&lt;item&gt; &lt;item @click.native="handleCli...
onload和onclick及其他事件的默认执行顺序
u010411682的专栏
08-07 2489
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!-- 以ie最新模式渲染当前页面 --> <!-- X-UA-Compatible是ie8专有meta属性
组件绑定原生事件
王依米
05-16 613
,//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript&
onchange、onclick、onblur等点击触发事件区别
weixin_44446619的博客
06-10 1396
标签： onblur:控件在失去焦点的时候触发 OnChange：当控件的内容发生改变时触发该事件 OnClick：点击该控件时触发 OnKeyDown：在控件有焦点的情况下，按下键时发生 OnKeyUp：在控件有焦点的情况下，释放键时发生 OnKeyPress：在控件有焦点的情况下，按下键时发生 键事件按下列顺序发生： 1.KeyDown 2.KeyPress 3.KeyUp 非字符键不会引发KeyPress，但是非字符键可以引发KeyDown，KeyUp OnMouseEnter：当鼠标指针进入控件时发
前端同时绑定两个事件设置先后顺序
xuxiake的博客世界
09-02 2204
如果为同一dom绑定两个不同事件时，一般来说是同时触发的，当然先绑定的会略微早触发一点，但是如果我们需要在第一个事件中处理一些参数，第二个事件中使用，这个时候会发现第二个事件中参数并没有被处理，常见的是table标签，表级事件和列表事件，表级事件初始化当前选择行，列表事件进行行处理，这个时候我们需要借用事件的回调来进行处理，这样我们可以自由的控制等待时间。 引入lodash.js，如果使用的是n...
js事件-笔记
qq_43563512的博客
10-26 719
这里写目录标题js事件常见事件事件的注册方式事件处理分级1.DOM0级事件处理程序：2. DOM2级事件处理程序：3. DOM3级事件事件流三个阶段 js事件 常见事件 onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作 onclick 单击事件 常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作 insubmit 表单提交事件 常用于表单提交前
addeventlistener事件第三个参数_DOM事件的简单思考
weixin_39947961的博客
11-27 131
语法elementaddEventListener()来绑定事件第一个参数 : ''事件名"第二个参数 : ''事件响应函数''第三个参数 : "事件执行时机" 默认是falsefalse表示冒泡阶段执行true表示捕获阶段执行理解阻止默认事件e.preventDefault()阻止冒泡e.stopPropagation（）jQuery的话el.on（'事件名',false）...
探索JavaScript事件机制：绑定方式与三要素详解
本文将深入探讨两种事件绑定方式——DOM 0级事件和DOM 2级事件，以及事件的三个关键要素：事件源、事件类型和事件处理过程。 **DOM 0级事件绑定方式**通常在HTML标签内使用`onclick`、`onmouseover`等属性直接设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值