重要知识点：每节博客都会重复🙉🙉🙉

口诀🤨：四基两空一对象，还有五个falsy值。

七种数据类型

number string bool symbol

null undefined

object

五个 falsy 值

null undefined

0 NaN

'' (空字符串)

DOM 事件委托

点击事件引发的纠纷

先从一个简单的点击事件开始了解，有这样一个点击事件:

提问1：点击了谁

点击文字，算不算点击儿子？
点击文字，算不算点击爸爸？
点击文字，算不算点击爷爷? 答案：都算

提问2：点击文字，最先调用fnYe/fnBa/fnEr中的哪一个函数？

答案：都行

IE5认为先调fnEr，网景认为先调fnYe,然后掐上了，最后闹到了W3C。

和事佬W3C

2002年，W3C发布标准

术语

那岂不是fnYe/fnBa/fnEr 都调用了两次？并不是。

示意图

addEventListener

事件绑定API
如果bool不传或者为falsy
如果bool为true

target v.s.currentTarget

区别

e.target一用户操作的元素
e.currentTarget-程序员监听的元素
this是e.currentTarget,我个人不推荐使用它

举例 div>span{文字},用户点击文字

e.target就是span

e.currentTarget就是div

DOM事件级别

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

DOM 0级事件

el.οnclick=function(){}

let btn = document.getElementById('btn');  
          btn.onclick=function(){
          alert(this.innerHTML);
}

当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

DOM 2级事件

el.addEventListener(event-name, callback, useCapture)

event-name: 事件名称，可以是标准的DOM事件

callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event

useCapture: 默认是false，代表事件句柄在冒泡阶段执行

let btn = document.getElementById('btn');
btn.addEventListener("click", test, false);
function test(e){
	e = e || window.event;
    alert((e.target || e.srcElement).innerHTML);
    btn.removeEventListener("click", test)
}
//IE9-:attachEvent()与detachEvent()。
//IE9+/chrom/FF:addEventListener()和removeEventListener()

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。

DOM 3级事件

在DOM 2级事件的基础上添加了更多的事件类型。

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~

JS全解（八）DOM事件

重要知识点：每节博客都会重复🙉🙉🙉

口诀🤨：四基两空一对象，还有五个falsy值。

七种数据类型

五个 falsy 值