JavaScript笔记：BOM--event
event 事件
浏览器自动触发或者用户手动触发的页面状态的改变
事件处理函数：当事件发生时自动调用的函数
事件发生之前就需要绑定到事件属性上
绑定事件的三种方式：
1、在html中绑定
<a onclick = "alert('hello world')"></a>2、在js中动态绑定，为事件属性赋值一个函数
document.getElementById("xxx").onclick = fun; function fun(){ alert("hello world"); }3、使用addEventListener添加
function fun1() { console.log("abc1"); } function fun2() { console.log("abc2"); } Element.addEventListener("click", fun1); Element.addEventListener("click", fun2);删除事件
Element.removeEventListener("click", fun2);注意：添加时，第二个参数可以写匿名函数，若该事件明确未来可能删除，则不可以写匿名函数，否则无函数名无法删除。
事件模型
一个事件发生，有三个阶段
1、捕获
由外到内，记录各级父元素上绑定的相同的事件
2、目标出发
首先触发目标元素上的事件处理函数
3、冒泡
按照捕获的顺序，反向执行，由内到外，依次触发各级父元素绑定的事件的处理函数
html部分： <body> <div class="div1"> <div class="div2"> <div class="div3"></div> </div> </div> </body> css部分： <style> .div1 { width: 500px; height: 500px; background-color: #f00; } .div2 { width: 400px; height: 400px; background-color: #0f0; position: absolute; top: 50px; left: 50px; } .div3 { width: 300px; height: 300px; background-color: #00f; position: absolute; top: 50px; left: 50px; } </style> js部分： var div1 = document.getElementsByClassName("div1")[0]; var div2 = document.getElementsByClassName("div2")[0]; var div3 = document.getElementsByClassName("div3")[0]; div1.addEventListener("click", fun); div2.addEventListener("click", fun); div3.addEventListener("click", fun); function fun(e) { console.log(this.className); }点击蓝色区域，输出结果如图：
addEventListener的第三个参数：capture
是否在捕获阶段，提前出发
true或者false，默认为false
将上面的代码中的js部分中修改一行
div2.addEventListener("click", fun, true);点击蓝色区域，输出结果如图：
不难发现，给div2绑定事件时，加入了第三个参数，true，div2的事件可以提前触发。
事件对象
当事件发生时，自动创建的封装所有事件信息的一个对象
获取：
DOM标准： 事件对象默认作为事件处理函数的第一个参数传入
function fun(e){ e;//事件发生时，自动获得事件对象 }IE8：在全局window，定义了一个event
function fun(e){ window.e;//事件发生时，自动获得事件对象 }兼容写法：
function fun(e){ e = e | window.e; }取消冒泡
DOM标准：e.Propagation();
IE8：e.cancelBubble = true;
兼容写法：
if (e.stopPropagation()) { e.stopPropagation(); } else { e.cancelBubble = true; }本人使用的Chrome浏览器，故将上面代码中js部分中的fun函数做如下改动
function fun(e) { console.log(this.className); e.stopPropagation(); }并删掉之前加入的true
点击蓝色区域，输出结果如图：