携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
监听函数
浏览器的事件模型是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到此事件，就会执行对应的监听函数
有三种思路支持事件绑定监听函数，以下来慢慢介绍（文末有小总结）
思路一：HTML 的 on- 属性
HTML语言允许在元素的属性中，直接定义某些事件的监听代码，元素的事件监听属性，都是on加上事件名
<body onload="doSomething()">
<div onclick="console.log('触发事件')">
上面代码为body节点的load事件、div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码
比如onload就是on + load，表示load事件的监听代码
思路二：元素节点的事件属性
window.onload = doSomething;
div.onclick = function (event) {
console.log('触发事件');
};
注意：这种方法与 HTML 的on-属性的差异是，它的值是函数名（doSomething），而不像 HTML 的on-属性，必须给出完整的监听代码（doSomething()）
思路三：EventTarget.addEventListener()
所有 DOM 节点实例都有addEventListener方法，用来为该节点定义事件的监听函数（昨日分享有讲述到）
比较推荐，优点如下：
- 同一个事件可以添加多个监听函数
- 能够指定在哪个阶段触发监听函数
- 除了 DOM 节点，其他对象（比如
window等）也有这个接口，等于是整个 JavaScript 统一的监听函数接口
小小总结
第一种“HTML 的 on- 属性”缺点：违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工
第二种“元素节点的事件属性”缺点：同一个事件只能定义一个监听函数。如果定义两次onclick属性，后一次定义会覆盖前一次，不利于使用
比较推荐第三种：EventTarget.addEventListener指定监听函数的方法哦～
写在最后
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：wangdoc.com/javascript/…
