事件流
描述从页面中接收事件的顺序，有三种模型：
- **IE事件冒泡 **
事件在目标元素上触发后，随着DOM树一层层向上冒泡，直到到达根节点。 -
Netscape事件捕获
事件从文档的根节点出发，途经各层DOM节点，并触发捕获事件，直到到达目标节点。 -
DOM2级事件流
第一阶段** 事件捕获阶段** 事件从根节点--->目标节点。
第二阶段** 处于目标阶段** 事件到达目标节点，在目标节点上被触发。
第三阶段** 事件冒泡阶段** 事件从目标节点--->根节点 。
事件监听
响应事件的方法 即 事件处理程序
-
方法
-
DOM0级事件
通过JavaScript的传统定制方式去处理事件程序，
就是 给一个元素的事件处理程序属性赋值
将 元素的事件处理程序属性的值 设置为一个函数：指定事件处理程序
将 元素的事件处理程序属性的值 设置为 null：删除事件处理程序
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript"> var btnClick = document.getElementById('btnClick'); btnClick.onclick = function showMessage() { ----------------->指定 alert(this.id); }; btnClick.onclick = null;-------------------------------------->删除 </script> -
DOM2级事件
addEventListener：为节点添加事件
removeEventListener：为节点移除事件
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript"> var btnClick = document.getElementById('btnClick'); var handler=function() { alert(this.id); } btnClick.addEventListener('click', handler, false); btnClick.removeEventListener('click', handler, false);//移除必须与添加参数相同 参数1 事件类型； 参数2 事件处理程序方法； 参数3 true事件捕获阶段/false事件冒泡阶段 </script> -
IE事件
IE并不支持addEventListener和removeEventListener方法，而实现：
attachEvent：添加事件处理程序
detachEvent：移除事件处理程序
<input id="btnClick" type="button" value="Click Here" /><script type="text/javascript"> var btnClick = document.getElementById('btnClick'); var handler=function() { alert(this.id); } btnClick.attachEvent('onclick', handler);-------->添加 btnClick.detachEvent('onclick', handler);-------->移除 （参数名与添加相同） 参数1 事件处理程序名称； 参数2 事件处理程序方法； </script>
-
-
区别
DOM0级事件 只能添加一个执行函数；兼容不同浏览器。
DOM2级事件 可以添加多个执行函数；对IE兼容不足。addEventListenerVSattachEvent
1 参数 数量
addEventListener的参数3 决定了事件监听的阶段可以在 捕获&冒泡；
attachEvent只能在冒泡阶段。
2 参数 意义
addEventListener参数1是事件类型（click，load）；
attachEvent参数1 是事件处理程序名称（onclick，onload）。
3 事件处理程序 作用域
addEventListener的作用域是元素本身，this指向触发元素；
attachEvent事件处理程序会在全局变量内运行，this指向window。
事件操作
-
停止事件传播
stopPropagation()：阻止冒泡。
stopImmediatePropagation()：阻止此节点上的所有事件传播。
<ul> <li >demo</li> </ul>var ul = document.querySelector('ul') var li = document.querySelector('li') function hello(){ console.log('hello') } function world(){ console.log('world') } 1--> ul.addEventListener('click',hello) 2--> li.addEventListener('click',world) 4---------> li.addEventListener('click',function(event){ event.stopPropagation(); }) 5-------------------> li.addEventListener('click',function(event){ event.stopImmediatePropagation(); }) 3--> li.addEventListener('click',hello) 执行1-2-3 事件li 为 "hello" "world" "hello" 执行1-2-3-4 事件li 为 "hello" "hello" //stopPropagation仅阻止"world" 执行1-2-3-5 事件li 为 "hello" //stopImmediatePropagation 阻止li的所有事件 -
阻止默认行为
preventDefault()：阻止默认行为
<a href = "http://baidu.com">baidu</a>var a = document.querySelector('a') var handler = function(event){ event.preventDefault(); console.log('阻止跳转') } a.addEventListener('click',handler)
