banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

前端面试之onclick与addEventListener区别详述

今天面试官问了这么一个问题:onclickaddEventListener 有哪些区别呢

很好问住了,自己答得不太满意,下来自己查了查红宝书第 17 章事件和 MDN,大概了解了是怎么一回事

上来先把答案摆上:

区别#

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括:

  • 允许给一个事件注册多个监听器
    • 特别是在使用 AJAX 库,JavaScript 模块,或其他需要第三方库 / 插件的代码
  • 提供了一种更精细的手段控制 listener 的触发阶段(可以选择捕获或者冒泡)
  • 它对 任何 DOM 元素 都是有效的,而不仅仅只对 HTML 元素有效。
  • 它注册的事件可以通过 removeEventListener来移除
    • 也就是说若添加的是匿名事件函数就无法移除了
  • this 的值是触发事件的元素的引用
    • console.log(e.currentTarget === this) // true

onclick注册 listener 的旧方法

  • 该方法会替换掉这个元素上所有已存在的 onclick 事件,其他 on 事件也是类似的。
  • 无法精细控制冒泡与否等
  • 移除可通过直接将 onclick 事件替换为 null

兼容性#

addEventListener 在 DOM 2 Events 规范中引入

  • 在 IE 9 之前,必须使用 attachEvent 而不是使用addEventListener
  • attachEvent 方法有个缺点,this 的值会变成 window 对象的引用而不是触发事件的元素

onclick 是 DOM 0 规范的基本内容

  • 几乎所有浏览器都支持,而且不需要特殊的跨浏览器兼容代码
  • 因此通常这个方法被用于动态地注册事件处理器,除非必须使用 addEventListener() 才能提供的特殊特性

addEventListener#

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,DocumentWindow或者任何其他支持事件的对象 (比如 XMLHttpRequest)

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

addEventListener 中有三个参数,typelisteneruseCapture,其中第一个参数为 事件类型clickmousemove 等,第二个参数为事件的回调函数,第三个参数为一个指定有关 listener 属性的可选参数对象,需注意的是:

在旧版本的 DOM 的规定中, addEventListener()的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序。随着时间的推移,很明显需要更多的选项。与其在方法之中添加更多参数(传递可选值将会变得异常复杂),倒不如把第三个参数改为一个包含了各种属性的对象,这些属性的值用来被配置删除事件侦听器的过程。
因为旧版本的浏览器(以及一些相对不算古老的)仍然假定第三个参数是布尔值,你需要编写一些代码来有效地处理这种情况。你可以对每一个你感兴趣的 options 值进行特性检测。

也就是说,addEventListener 需要额外的代码来兼容旧浏览器,而 onclick 不需要,在要考虑兼容性的场景下就需要好好考虑。

事件中的 this#

addEventListenerthis 的值通常情况下都是触发事件的元素的引用
- console.log(e.currentTarget === this) // true

但是箭头函数不然,箭头函数没有自己的 this,箭头函数只会从自己的作用域链的上一层继承 this

onclick#

全局事件处理器(GlobalEventHandlers)的 onclick 属性,是处理当前元素的 click 事件的事件处理器(event handler)。

当用户点击一个元素时,会触发 click 事件。在每次点击的整个过程中,click 事件的运行顺序在 mousedown 和 mouseup 事件之后。

备注:  当你使用 click 事件去触发一个动作时,也要考虑向 keydown 事件添加此动作,以便允许不使用鼠标或触摸屏的用户进行同样的操作。
MDN 上讲的没那么详细,红宝书中对 onclick 的描述有很重要的几点

拓展作用域链#

<script> 
function showMessage() { 
    console.log("Hello world!"); 
} 
</script> 
<input type="button" value="Click Me" onclick="showMessage()"/> 

上面以onclick方式指定的事件处理程序会创建一个函数来封装属性的值。(但是不建议这么做,原因结尾有)

这个函数有一个特殊的局部变量 event,其中保存的就是 event 对象

<!-- 输出"click" --> 
<input type="button" value="Click Me" onclick="console.log(event.type)"> 

有了这个对象,就不用开发者另外定义其他变量,也不用从包装函数的参数列表中去取了。 在这个函数中,this 值相当于事件的目标元素,如下面的例子所示:

<!-- 输出"Click Me" --> 
<input type="button" value="Click Me" onclick="console.log(this.value)"> 

这个动态创建的包装函数还有一个特别有意思的地方,就是其作用域链被扩展了。在这个函数中, document 和元素自身的成员都可以被当成局部变量来访问。而这是通过使用 with 实现的:

function() { 
    with(document) { 
        with(this) { 
        // 属性值 
        } 
    } 
}

这也是为什么在 onclick 定义的事件,调用 document 上的事件时可以免去 document 前缀,实际上是它在前面还做了一层包装。

使用 HTML 指定 onclick 事件处理的一个问题是使 HTML 与 JavaScript 变得强耦合,如果需要修改事件处理程序,则必须在 HTML 和 JavaScript 中都进行修改,不建议使用 HTML 事件处理程序,而建议使用 JavaScript 指定事件处理程序的主要原因。

也就是在 js 中,当真正需要使用 onclick 时,使用如下方式:

let btn = document.getElementById("myBtn"); 
btn.onclick = function(e) { 
    console.log(e.type); // "click" 
};
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。