JavaScript笔记：BOM--event

event 事件浏览器自动触发或者用户手动触发的页面状态的改变事件处理函数当事件发生时自动调用的函数事件发生之前就需要绑定到事件属性上绑定事件的三种方式1、在html中绑定a onclick alert(hello world)/a2、在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 classdiv1 div classdiv2 div classdiv3/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绑定事件时加入了第三个参数truediv2的事件可以提前触发。事件对象当事件发生时自动创建的封装所有事件信息的一个对象获取DOM标准 事件对象默认作为事件处理函数的第一个参数传入function fun(e){ e;//事件发生时自动获得事件对象 }IE8在全局window定义了一个eventfunction fun(e){ window.e;//事件发生时自动获得事件对象 }兼容写法function fun(e){ e e | window.e; }取消冒泡DOM标准e.Propagation();IE8e.cancelBubble true;兼容写法if (e.stopPropagation()) { e.stopPropagation(); } else { e.cancelBubble true; }本人使用的Chrome浏览器故将上面代码中js部分中的fun函数做如下改动function fun(e) { console.log(this.className); e.stopPropagation(); }并删掉之前加入的true点击蓝色区域输出结果如图