1. 监听函数定义：通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式
2. JS有三种方法：可以为事件绑定监听函数
（1）HTML的on-属性:
1 <body onload="doSomething()">
2 <div onclick="console.log(‘触发事件‘)">
1 <div onclick="console.log(2)">
2 <button onclick="console.log(1)">点击</button>
3 </div>
上面代码中，<button>是<div>的子元素。<button>的click事件，也会触发<div>的click事件。由于on-属性的监听代码，只在冒泡阶段触发，所以点击结果是先输出1，再输出2，即事件从子元素开始冒泡到父元素
on-属性，与通过元素节点的setAttribute方法设置on-属性，效果是一样的1 el.setAttribute(‘onclick‘, ‘doSomething()‘);
2 // 等同于
3 // <Element onclick="doSomething()">
（2）元素节点的事件属性
1 window.onload = doSomething;
2
3 div.onclick = function (event) {
4 console.log(‘触发事件‘);
5 };
on-属性的差异是，它的值是函数名（doSomething），而不像后者，必须给出完整的监听代码（doSomething()）onclick属性，后一次定义会覆盖前一次。因此，也不推荐使用（3）EventTarget.addEventListener()
window.addEventListener(‘load‘, doSomething, false);
addEventListener方法，用来为该节点定义事件的监听函数window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口3. 监听函数内部的this指向触发事件的那个元素节点
<button id="btn" onclick="console.log(this.id)">点击</button>
执行上面代码，点击后会输出btn
其他两种监听函数的写法，this的指向也是如此
// HTML 代码如下 // <button id="btn">点击</button> var btn = document.getElementById(‘btn‘); // 写法一 btn.onclick = function () { console.log(this.id); }; // 写法二 btn.addEventListener( ‘click‘, function (e) { console.log(this.id); }, false );
上面两种写法，点击按钮以后也是输出btn
原文：https://www.cnblogs.com/icyyyy/p/14764315.html