JavaScript-DOM-事件绑定

当我们为元素绑定一个单击事件时，通常会想到element.οnclick=function(){}，但是要绑定多个单击函数时却会失效，并且会被最新的响应函数覆盖。所以就有了addEventListener()方法，但是IE8及以下不支持。

addEventListener()

该方法可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件触发时，响应函数将会按照函数的绑定顺序执行。有三个参数表示内容如下：

事件的字符串，不要on如：click而不是onclick。
回调函数，当事件触发时该函数被调用。
是否在捕获阶段触发事件，需要一个布尔值，true表示在捕获阶段触发，false则相反。一般都为false。

attachEvent()

IE8及以下不支持addEventListener()，可以通过attachEvent()为一个元素的相同事件同时绑定多个响应函数。但是事件触发时，响应函数将会后绑定先执行，与addEventListener()相反，用法相似，有两个参数：

事件的字符串，要on 如：onclick而不是click
回调函数，当事件触发时该函数被调用

注意

需要注意的是addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window对象，this是谁是由调用方式决定的。call()、apply()、bind()都可以用来重定义this对象对于三种方法可以参考这篇讲解：JavaScript 中 call()、apply()、bind() 的用法。那对于浏览器调用的this我们不可修改，可以在匿名函数中调用回调函数，拿回修改权力。迂回修改！

示例

通过为按钮单击事件绑定多个响应函数的例子来试一试以上方法。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM-事件绑定示例</title><script>window.onload = function () {let btn = document.getElementsByTagName('button')[0];/** 绑定函数* 参数：*  obj: 要绑定事件的对象*  enentStr：事件的字符串（不要on）*  callback：回调函数*/function bind(obj, enentStr, callback) {// 兼容判断if (obj.addEventListener) {// 大部分浏览器兼容obj.addEventListener(enentStr, callback, false);} else {// IE8以下，事件名需要onobj.attachEvent('on' + enentStr, function () {// 浏览器调用不可修改，在匿名函数中调用回调函数，拿回修改权力callback.call(obj);});}}// 调用绑定函数bind(btn, 'click', function () {alert(this);})bind(btn, 'click', function () {alert('hello 啊');})}</script>
</head><body><button>点我</button>
</body></html>

事件绑定-addEventListener()和attachEvent()的区别及用法相关推荐

addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
11.①事件冒泡：取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1，参2，参3）③事件传播
目录一:事件冒泡: 1.冒泡指的是事件的向上传导, 2.冒泡与子元素所在位置无关,与结构有关(就算给子元素添加定位,移出父元素里面,还是会产生冒泡) 3.要取消事件的冒泡需要用到事件对象(两种方法) ...
JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
jquery 事件绑定及取消 bind live delegate on one区别（超详细且通俗易懂）
on bind delegate live one 四种方法差别不是特别大 bind讲完后,后面的方法只会说不同点 1.bind() $(selector).bind(event,data,funct ...
JQuery对象和JS对象区别与转换|| 事件绑定入口函数样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
React开发（269）:事件的绑定-addEventListener
利用函数addEventListener('事件',function (){})可以是同个元素执行多个程序复制代码big.addEventListener('click',function(){ c ...

事件绑定-addEventListener()和attachEvent()的区别及用法

JavaScript-DOM-事件绑定

addEventListener()

attachEvent()

注意

示例

事件绑定-addEventListener()和attachEvent()的区别及用法相关推荐

最新文章

热门文章