JS里addEventListener和on的区别

约定不等于承诺〃 2022-05-25 22:04 213阅读 0赞

一、首先介绍两者的用法

1.on的用法：以onclick为例

第一种：

obj.onclick = function(){
    //do something..
    }

第二种：

obj.οnclick= fn;
    function fn (){
    //do something...
    }

第三种：当函数fn有参数的情况下使用 匿名函数来传参：

obj.onclick = function(){fn(param)};
    function fn(param){
    //do something..
    }

不能够这样写: 错误写法：obj.οnclick= fn(param):

因为这样写函数会立即执行，不会等待点击触发， 特别注意一下

2.addEventListener的用法：

形式：

addEventListener(event,funtionName,useCapture)

参数：

event:事件的类型如 “click”

funtionName：方法名

useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。

*   *  true - 事件句柄在捕获阶段执行
     *  false- false- 默认。事件句柄在冒泡阶段执行

写法：

第一种：

obj.addEventListener("click",function(){
    //do something
    }));

第二种，没参数可以直接写函数名

obj.addEventListener("click",fn,fasle));
    function fn(){
    //do something..
    }

第三种：函数有参数时需要使用匿名函数来传递参数

obj.addEventListener("click",function(){fn(parm)},false);

二、示例分析

为什么需要addEventListener？

先来看一个片段：

html代码

<div id="box">Aerchi</div>

用on的代码

![复制代码][copycode.gif]

1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.onclick = function(){ 4 console.log("我是box1"); 5 } 6 box.onclick = function(){ 7 box.style.fontSize = "18px"; 8 console.log("我是box2"); 9 } 10 } 　　　　　运行结果：“我是box2”

![复制代码][copycode.gif]

看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。

用addEventListener的代码

![复制代码][copycode.gif]

1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.addEventListener("click",function(){ 4 console.log("我是box1"); 5 }) 6 box.addEventListener("click",function(){ 7 console.log("我是box2"); 8 }) 9 } 　　　　运行结果：我是box1 　　　　　　　　　我是box2

![复制代码][copycode.gif]

addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false

第三个参数的使用

有时候的情况是这样的

如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）

![复制代码][copycode.gif]

1 box.addEventListener("click",function(){ 2 console.log("box"); 3 }) 4 5 child.addEventListener("click",function(){ 6 console.log("child"); 7 }) 　　执行的结果： 　　　　　　　　child 　　　　　　　　box

![复制代码][copycode.gif]

也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。

如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。

![复制代码][copycode.gif]

1 box.addEventListener("click",function(){ 2 console.log("box"); 3 },true) 4 5 child.addEventListener("click",function(){ 6 console.log("child"); 7 }) 　　执行的结果： 　　　　　　　　box 　　　　　　　　child

![复制代码][copycode.gif]

事件冒泡执行过程：

从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

事件捕获执行过程：

从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

三、addEventListener注意事项：

1.特别说明addEventListener不被 IE9以下兼容，IE9以下用使用 attachEvent()

obj.attachEvent(event,funtionName);

参数：

event:事件类型（需要写成“onclick”前面加on，这个与addEventListener不同）

funtionName:方法名（要参数是也是需要使用匿名函数来传参）

四、事件集合：

1.鼠标事件：

*  click(单击)
 *  dbclick(双击)
 *  mousedown(鼠标按下)
 *  mouseout(鼠标移走) 
 *  mouseover(鼠标移入)
 *  mouseup(鼠标弹起)
 *  mousemove(鼠标移动)

2.键盘事件：

*  keydown(键按下)
 *  keypress(按键)
 *  keyup(键起来)

3.HTML事件：

*  load（加载页面） 
 *  unload（卸载离开页面）
 *  change（改变内容）
 *  scroll（滚动）  
 *  focus（获得焦点）
 *  blur（失去焦点）

五. 总结：

onXXX与addEventListener都是为dom元素添加事件监听，使其在事件发生后执行相应的代码，操作。有

绑定事件有几种方式：

## Event Listeners ##

(`addEventListener` 以及 IE 的 `attachEvent`)

*  IE 8 以及更低版本的 IE 中，需要用 [attachEvent][] 方法：
    
        element.attachEvent('onclick', function() { /* do stuff here*/ });
 *  对于 IE 9 和更高版本的 IE，以及其它浏览器，则要用 [addEventListener][] 方法：
    
        element.addEventListener('click', function() { /* do stuff here*/ }, false);

用上面这种方法（[DOM level 2 events][]），理论上可以为一个元素绑定无数个事件，实际应用中则决定于客户端的电脑内存以及浏览器。

上面的例子应用了[匿名函数][Link 1]这个特性，还可以使用[构造函数][Link 2]或者[闭包][Link 3]来添加事件监听器：

var myFunctionReference = function() { /* do stuff here*/ }
    
    element.attachEvent('onclick', myFunctionReference);
    element.addEventListener('click', myFunctionReference , false);

另一个重要特性，则是上面这段代码中最后一行的最后一个参数，用来控制监听器[对于冒泡事件的响应][Link 4]。95%的使用场景中，这个参数都为 `false`，`attachEvent` 以及内联事件则都没有可以实现相同功能的这个参数。

## Inline Events 内联事件 ##

(HTML 的 `onclick=""` 属性，以及 `element.onclick`)

在所有支持 JavaScript 的浏览器中，可以用下面的方式来添加内联的事件监听器。

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

虽然很多有经验的开发人员对这种方式嗤之以鼻，但是它的确足够的简单粗暴。在这里你不能使用闭包或者匿名函数，并且控制域也是有限的。

还有另一种方法：

element.onclick = function () { /*do stuff here */ };

这个方法能实现相同的效果，并且有更多的控制域（因为是 JS 脚本，而不是 HTML 代码），当然了，也能使用匿名函数、构造函数、闭包。

内联事件一个明显的不足：由于内联事件是[作为元素属性保存起来][Link 5]的，这些属性可以被覆盖，所以如果为同一个事件绑定了多个处理程序，那么最后一个处理程序会覆盖之前的程序（多谢 @谦龙 指出此处的翻译错误）。

var element = document.getElementById('testing');
    element.onclick = function () { alert('did stuff #1'); };
    element.onclick = function () { alert('did stuff #2'); };

运行上面的示例，将只会看到“did stuff \#2”——第二行代码覆盖了默认的内联 `onclick` 属性，第三行代码又将第二行代码覆盖了，所以会产生这样的结果。

## 谁是最佳方案？ ##

要回答这个问题，就要考虑各个浏览器的兼容性，以及实际需求了。即使现在只需要为一个元素绑定一个事件，但是以后很可能还要同时再绑定别的事件，这个时候，就需要用 `attachEvent` 和 `addEventListener` 了，否则用内联方法就可以搞定了。

jQuery 以及其它的 JavaScript 框架，已经将各个浏览器的 `DOM level 2 events` 的实现以通用模型的形式封装起来了，所以通过 jQuery 可以很方便地写出适用于所有浏览器的代码：

$(element).on('click', function () { /* do stuff */ });

在解决问题的时候，不要简单地就事论事，比如这篇文章讨论的就是如何添加事件监听器，那就不妨写一个适用于所有浏览器的方法：

function addEvent(element, evnt, funct){
      // if else 结构可用三元运算符 ? : 来精简
      // 这里之所以要这样写，是便于读者理解
      if (element.attachEvent) // IE 8 及更低版本浏览器
       return element.attachEvent('on'+evnt, funct);
      else // IE 8 及以上，或其它浏览器
       return element.addEventListener(evnt, funct, false);
    }
    
    // 调用示例
    addEvent(
        document.getElementById('myElement'),
        'click',
        function () { alert('hi!'); }
    );

## 事件的传播是可以阻止的：   • 在W3c中，使用stopPropagation()方法   • 在IE下设置cancelBubble = true；   在捕获的过程中stopPropagation()；后，后面的冒泡过程也不会发生了~   3.阻止事件的默认行为，例如click <a>后的跳转~   • 在W3c中，使用preventDefault()方法；   • 在IE下设置window.event.returnValue = false;event.stopPropagation();      如下:   event.stopPropagation();      event.cancelBubble=true;      event.preventDefault();       ##

## 相关文献 ##

*  [W3 HTML specification, element Event Handler Attributes][Link 5]
 *  [element.addEventListener on MDN][addEventListener]
 *  [element.attachEvent on MSDN][attachEvent]
 *  [Jquery.on][]
 *  [quirksmode blog "Introduction to Events"][quirksmode blog _Introduction to Events]
 *  [CDN-hosted javascript libraries at Google][]

本文地址: https://blog.csdn.net/aerchi/article/details/80017942

[copycode.gif]: /images/20220526/f731da0f2036411a96bbb79b73ba6916.png
[attachEvent]: http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
[addEventListener]: https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener
[DOM level 2 events]: http://www.w3.org/wiki/Handling_events_with_JavaScript#The_evolution_of_events
[Link 1]: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope
[Link 2]: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function
[Link 3]: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures
[Link 4]: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
[Link 5]: http://www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes
[Jquery.on]: http://api.jquery.com/on/
[quirksmode blog _Introduction to Events]: http://www.quirksmode.org/js/introevents.html
[CDN-hosted javascript libraries at Google]: https://developers.google.com/speed/libraries/