JS 绑定多个事件的区别【addEventListener()与attachEvent()的区别】

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： js代码 文章标签： JS 绑定多个事件方法区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guanmao4322/article/details/87733628
版权

为元素绑定多个事件的方法有：addEventListener()与attachEvent()

区别：
1、参数个数不一样， addEventListener()三个参数，attachEvent()两个参数

2、 addEventListener()  谷歌，火狐，IE11支持，IE8不支持；

       attachEvent() 谷歌，火狐不支持，IE11不支持，IE8支持。

3、this不同，addEventListener 中的this是当前绑定事件的对象
                        attachEvent中的this是window
4、addEventListener中事件的类型(事件的名字)没有on
      attachEvent中的事件的类型(事件的名字)有on

夏沐_lk
关注
专栏目录
测试绑定多个addEventListener
客栈
07-17 1416
test 123 321 321 var a=document.getElementById('bar'); a.addEventListener('click',function () { console.log("1") },true); a.addEventListener('click',function () { console.log("2") },fa
window.addEventListener来解决让一个js事件执行多个函数
10-27
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数...
weixin_34417200的博客
01-08 587
本篇体验JavaScript事件的基本面，包括：   ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加载之后起效   有这样一段简单的代码：<head> <meta http-equiv="Content-Type" content="text/html; charset=ut...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3668
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
Dom多个事件绑定addEventListener、鼠标事件、拖拽元素
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
03-15 1649
addEventListener() - 也可以通过addEventListener()来为元素绑定事件 addEventListener(type, listener [, useCapture]) - 参数： type 要监听的事件的字符串，注意这里不需要写on listener 回调函数，当事件发生后调用的函数 useCapture 布尔值，是否在捕获阶段触发事件，一般都是false 通过addEventListener()可以为一个元素的一个事件绑定多个响应函数， 这样当事件被触发时
JavaScript------单个事件添加多个监听器
cmHuney的博客
01-30 477
当点击时，所有处理器函数都会运行。
javascript attachEvent绑定多个事件执行顺序问题
10-28
这种方法简单直接，但缺点是不适用于需要绑定多个事件处理函数的情况，因为它会在执行完第一个函数后直接返回，而不会继续执行后续的函数。如果需要绑定多个函数，则需要在函数内部再次调用其他函数： ```...
浅谈addEventListener和attachEvent的区别
09-02
如果多个事件监听器在不同层级使用不同的`useCapture`值，捕获模式的事件先于冒泡模式的事件执行。 相比之下，`attachEvent` 是IE浏览器特有的方法，仅适用于IE8及以下版本。它的语法稍微简单一些： 1. `element`...
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
2. **`attachEvent`**: 与`addEventListener`不同，`attachEvent`在IE中执行事件处理函数时，`this`会指向绑定事件的元素，通常是全局对象`window`。当点击`test1`时，所有浏览器的行为一致，因为`onclick`属性直接...
javascript attachEvent和addEventListener使用方法
10-30
JavaScript 是一种基于对象和事件驱动的脚本语言，它...最后，需要注意的是，在实际编程中，多次为同一个事件类型绑定多个事件处理函数可能会导致性能问题，因此应当谨慎使用，并确保在不需要时及时移除事件监听器。
addEventListener，attachEvent，元素绑定（解绑）多事件兼容
Chad97的博客
08-25 598
addEventListener，attachEvent，元素绑定多事件兼容 有些时候我们需要对一个元素绑定多个事件或者一个元素多次事件绑定，通常会用addEventListener 书写格式：对象.addEventListener（”事件类型”,”事件处理函数”,”false”） 举个栗子 document.getElementById("dv").addEventListener...
addEventListener绑定事件，它可以绑定多个响应函数
qq_46302247的博客
06-16 1799
dom.addEventListener(“click”,function(){……},false) 和 dom.onclick= function() {……} 的区别？ addEventListener绑定事件，它可以绑定多个响应函数 attachEvent的callback回调默认是window（addEventListener的callback默认是被绑定事件的dom），则callback中的this也指向window，但是我们希望是obj，所以在callback外面包一个function，则可以
JavaScript - WebAPI - 注册/移除多个同名事件(addEventListener)
Henry_ID的博客
08-19 654
1.1-addEventListener注册事件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
JS_addEventListener事件添加 移除，addEventListener event事件参数，DOMContentLoaded 加载完成后触发
小歪博客
03-12 3270
介绍 语法： element.addEventListener(event, function, useCapture) 参数 介绍 event 必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。 function 必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。 useCaptu
addEventListener
weixin_33898233的博客
11-13 993
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 1 2 3 定义和用法 addEventListener() 方法用于向指定元素添加事...
addEventListener与onclick
qq_43320218的博客
08-14 937
<ul id="test"> <li>a1</li> <li>a2</li> <li>a3</li> </ul> <a href="https://baidu.com" id='aa'>百度</a> <script> // 事件冒泡机制，点击li会弹出对应的li的内容 do.
JavaScript多个事件的绑定（所有浏览器均可以用）
Yueqin0512的博客
09-30 4081
单个事件的绑定 添加按钮 <button id="btn01">点击</button> 使用对象.事件 = 函数的形式绑定响应函数，他只能同时为一个元素的一个事件绑定一个函数 //点击按钮以后弹出内容 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ alert("1"); }; 若想绑定多个事件 使用对象.事件 = 函数的形式绑定响应函数,不能绑定多个函数，如果绑定多了，后面
普通绑定事件和用 addEventListener 添加事件有什么区别？
NewDayStudy的博客
11-28 5890
一、onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。              二、addEventListener 能添加多个事件绑定，按顺序执行。              三、addEventListener方式，不支持低版本的IE。（attachEvent 支持IE）。     四、普通方式绑定事件后，不可以取消。addEventListener绑定
js addEventListener绑定事件监听基础，用事件传播原理，理解事件监听函数执行顺序
CodePrincess的博客
09-07 2658
js addEventListener绑定事件监听基础，用事件传播原理，理解事件监听函数执行顺序
浏览器事件绑定测试：onclick与addEventListener
对于现代浏览器，`addEventListener`提供了更灵活的事件处理方式，例如可以为同一个事件添加多个监听器，以及控制事件的冒泡和捕获行为。而`onclick`等内联事件处理方式虽然简单，但在维护性和代码组织上可能存在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值