DOM启蒙——第11章
1.DOM事件概览
●DOM事件是指发生某种与DOM中元素、document对象或window对象有关的时刻或者契机。
●可以通过HTML内联属性事件处理程序，属性事件处理程序，或者addEventListener()方法布置事件回调。
var div=document.querySelector("#warp");
//属性事件处理程序
div.onclick=function(){alert("触发属性事件处理程序")};
//addEventListener方法
div.addEventListener('click',function(){ alert("触发addEventListener") },false);
●使用属性事件处理程序的坏处是每次只能给事件属性赋一个值。当多次赋值，后边的会覆盖之前的。
●Element节点三者都支持，Document节点支持属性事件处理程序和addEventListener()方法，window对象通过body
或者frameset元素支持内联事件处理程序，也支持属性事件处理程序和addEventListener()方法。
●属性事件处理程序也称为DOM0级事件;addEventListener称为DOM2级事件。
3.事件流程
事件发生时在DOM中传播时，当div被点击，捕捉阶段从window对象开始，然后通过在每个对象上触发click事件向DOM树下方传播，直到它抵达事件目标。当捕捉阶段结束，冒泡阶段就开始，先在目标元素自身上触发click事件，然后传播阶段开始从事件目标上传播，触发click事件，直到它抵达window对象。
4.addEventListener()在所有Element节点、window对象及document对象都可用
●addEventListener()接受三个参数，一个是要监听的事件类型，此字符串不含有on前缀，第二个是事件发生时调用的函数，第三个是布尔值，表示事件监听在捕获阶段还是冒泡阶段，捕获阶段为true.
●若没指定第三个参数值，默认为false，addEventListenter()方法还可以用在XMLHttpRequest对象上.
5移除事件监听函数
●若原始的监听函数不是以匿名函数形式添加，那么可以用removeEventListener()方法移除。
document.querySelector("div").addEventListener('mousemove',function sayHi(){console.log('element')},false);
document.querySelector("div").removeEventListener('click',sayHi,false);
6.从事件对象获取事件属性
默认情况下调用事件处理程序或者回调函数时会传一个参数，内含所有有关事件自身的信息。
document.querySelector("div").addEventListener('click',function (event){
Object.keys(event).sort().forEach(function(item){
console.log(item+ ' = '+event[item]);
})
},false);
事件对象还提供stopPropagation()、stopImmediatePropagation()、和preventDefault(）方法
7.使用addEventListener()监听函数中this值
传给addEventListener()方法的事件监听函数中this的值会指向事件绑定的节点或对象
document.querySelector("div").addEventListener('click',function(){
console.log(this);
},false);
还可以使用event.currentTarget属性在节点或对象的事件监听函数中获取等同this所供值的引用。
8.事件调用时取得事件模版而不是绑定的对象
event.target可以获得事件的源点。如body元素有click事件，而在body元素中点击div会触发body的click事件，使用event.target指向触发click事件的div
document.body.addEventListener('click',function(event){
console.log(event.target);
},false);
若点击的是body元素而非div，则targer和事件监听函数中this指向的元素节点是同一个，因此event.target、this、event.currentTarget都会指向body元素。
9.使用preventDefault()撤销浏览器默认事件
浏览器的默认事件可以通过为调用默认事件的节点或对象绑定事件处理函数，并在事件发生时调用preventDefault()方法阻止掉。
document.querySelector('a').addEventListener('click',function(event){
event.preventDefault();//阻止a的默认事件，即跳转至URL
})
●即使默认行为被阻止，事件仍然会传播冒泡。
●传给事件监听函数的事件对象有一个布尔值calcelable属性，表示此事件是否会响应preventDefault()方法
10.使用stopPropagation()终止事件流程
在事件处理程序、监听函数内调用stopPropagation()将终止捕捉和冒泡事件流程，但直接绑定到该节点或者对象的监听函数仍然会被调用。
document.querySelector("div").addEventListener('click',function(){
console.log('我会被调用');
},false);
document.querySelector("div").addEventListener('click',function(event){
console.log('调用所绑定的点击事件，但阻止捕捉与冒泡');
event.stopPropagation();
},false);
这样点击div时仅div触发事件，而不会冒泡到Body
11.使用stopImmediatePropagation()终止事件流程与相同目标的其他事件。
在事件处理程序、监听函数中调用stopImmediatePropagation()将终止事件流程阶段和其他绑定到事件目标上且在调用stopImmediatePropagation()方法的监听函数之后的事件监听。
12.自定义事件
使用addEventListener()方法结合document.createEvent()、initCustomEvent()及dispatchEvent()就可以绑定并触发自定义事件。
var divElement=document.querySelector('div');
var cheer=document.createEvent('CustomEvent');
divElement.addEventListener('goBlue',function(event){
console.log(event.detail.goBlueIs)
},false);
cheer.initCustomEvent('goBlue',true,false,{goBlueIs:"it's gone"});
divElement.dispatchEvent(cheer);
</script>