DOM 0 知识点
<script>
function print(){
console.log(1)
}
X.onclick = print; //是对的
Y.onclick = print();
Z.onclick = print.call();
</script>
<button id='X' onclick='print'>A</button>
<button id='Y' onclick='print()'>B</button> //是对的
<button id='Z' onclick='print.call()'>C</button> //是对的
HTML 中onclick = '要执行的代码'，一旦用户点击，浏览就eval('要执行的代码')，这里不是属性，不是函数，是一段代码。
JavaScript 中，一旦用户点击，浏览器就执行X.onclick.call(X,{})，意思是onclick是一个函数属性，而print是一个属性，因为它的类型是对象；但下面的print()的类型是undefined。
所以在HTML 中必须传递一个要执行的代码，JavaScript 中必须传递一个函数
DOM 2 知识点
<button id='xxx'>A<button>
xxx.addEventListener('click',function(){
console.log(1)
})
xxx.onclick = function(){
console.log(2)
}
那它们两个的区别是啥呢？
xxx.onclick = function(){}只是一个属性，所以它是唯一的，如果这时候你要绑定2个onclick事件就麻烦了。
xxx.addEventListener()它是一个队列，先进先出，就是说先绑定的先触发。所以它叫做事件监听队列，这里是排队，xxx拥有一个队列叫做eventlisteners，你不能直接访问它，但你可以通过addEventListener去排个队，如果用户点击了，就先触发排在第一位的函数，排在后面的一次触发。队列的实质是数组。既然有入队，那是不是也有出队：
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
function f1(){
console.log(3);
}
xxx.addEventListener('click',f1);
xxx.addEventListener('click',f2);
xxx.removeEventListener('click',f1);
xxx.addEventListener('click',f3);
xxx.removeEventListener('click',f3);
最后的结果就是打印：2。
f1 在排队的过程中移除了，f3 刚进入队列就移除了。
前面写轮播的时候用了one事件，它内部是怎样的呢？
function f1(){
console.log(1);
xxx.removeEventListener('click',f1);
}
xxx.addEventListener('click',f1);
one在函数处理时的最后一句加上离开队列语句，on就是没有出队这句的，也就是说一直会执行。
JS事件中的冒泡和捕获
捕获事件：事件从最外层父元素到最里层子元素的顺序触发，叫做捕获事件，果document > html > body > div > p > button
冒泡事件：正好和捕获事件相反，事件从最里层子元素到最外层父元素的顺序触发，叫做冒泡事件，如：button > p > div > body > html > document
DOM 2 中规定了同时支持捕获事件和冒泡事件，用addEventListener()方法绑定一个事件处理函数，其语法：
target.addEventListener(type, listener, useCapture);
type：表示监听事件类型的字符串，如clcik，前面没有on
listener：表示监听的对象或者一个函数
useCapture：表示是否使用捕获，接受一个布尔值，true是触发捕获事件，不写默认false触发用冒泡事件。
事件在默认执行的过程中是先捕获后冒泡，第三个参数只是让它在什么状态下触发。如果一个节点捕获和冒泡事件同时存在，谁在前谁先执行，和事件无关。
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件"); //4️⃣
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件"); //2️⃣
},false);
s1.addEventListener("click",function(e){
console.log("s1 捕获事件"); //1️⃣
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件"); //3️⃣
},true);
</script>
当我点击在s2上面，触发顺序是s1捕获事件 > s2冒泡事件 > s2捕获事件 > s1冒泡事件
事件代理：事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
<ul id="colors">
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>black</li>
<li>white</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
</script>
来看一个具体例子：获取li里面的文本，用事件流方法
var ul = document.querySelector('ul');
ul.addEventListener('click',showColor,false);
function showColor(e){
var x = e.target;
if(x.nodeName.toLowerCase() === 'li'){
console.log('The color is ' + x.innerHTML);
}
}
如果不使用事件代理，要获取li里面的文本应该怎么弄呢？老方法是获取到所有子元素li，遍历它就可以了
var colors = color-list.children
for(var i=0;i<colors.length;i++){
colors[i].addEventListener('click',showColor,false);
};
function showColor(e){
var x = e.target;
console.log("The color is " + x.innerHTML);
};
阻止事件不再传播，可以使用事件对象的stopPropagation()方法，但不会彻底消除事件，如果说绑定多个事件的话。
用stopImmediatePropagation()方法，绑定的其他事件也将不会执行。
