了解事件

事件的本质是程序不同组件之间通信的一种方法，也是异步编程的一种实现。 DOM 支持大量事件。
DOM 事件操作（监控和触发）在 EventTarget 接口中定义。所有Node对象都部署了这个接口，其他一些需要事件通信的内置浏览器对象（如XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。
该接口主要提供三个实例方法：
addEventListener：绑定事件监听器；
removeEventListener：移除事件的监听函数；
dispatchEvent：调度事件；

EventTarget.addEventListener()

用于定义当前节点或对象上的特定事件监听函数。当这个事件发生时，监听函数就会被执行。该方法没有返回值。

target.addEventListener(type, listener[, useCapture]);

type：事件名称，区分大小写。
listener：监听器功能。当事件发生时，监听器函数将被调用。
useCapture：布尔值，表示在捕获阶段是否触发监听函数（见下文第《事件的传播》小节），默认值为 false（仅在冒泡阶段触发监听函数）。该参数是可选的。
这是一个例子：

function hello(){
  console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello,false);

监听功能

网页浏览器的时间模型是通过监听器函数来响应事件。
事件发生后，浏览器监听该事件，并执行相应的监听功能。
这是事件驱动编程模式（event-driven）的主要编程方式。
JavaScript 具有三种方法来绑定事件的侦听器函数。

方法 1：HTML 的 on 属性（不好）

HTML 语言允许您在元素属性中定义某些事件的侦听器代码。

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

上面的代码是body节点的load事件和
div节点的click事件。指定监听代码。当事件发生时，这段代码将被执行。
元素的事件侦听器属性全部打开，并加上事件名称。比如onload就是on+load，代表load事件的监听代码。
请注意，这些属性的值是要执行的代码，而不是函数。
当指定的事件发生时，属性的值将按原样传递给JavaScript引擎执行。因此，如果您想执行该函数，请不要忘记添加几个括号。

<!-- 正确 -->
<body onload="doSomething()">

<!-- 错误 -->
<body onload="doSomething">

双击事件

<div onclick="console.log(2)">
  <button onclick="console.log(1)">点击</button>
</div>

上面的代码是

的子元素。

的点击事件也会触发

的点击事件。由于on属性的看门狗，只在bubble阶段触发，
所以点击的结果是先输出1，再输出2，即事件从子元素冒泡到父元素。
直接设置on属性与通过元素节点的setAttribute方法设置on属性效果相同。

el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">

EventTarget.addEventListener()

监听功能

方法 1：HTML 的 on 属性（不好）

双击事件

版权声明

作者文章