js事件流的传播流程
事件流:描述的是从页面接收事件的顺序
1.事件流分为:事件冒泡(微软)和 事件捕获(Netscape)。
2. 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档).
3. 捕获事件流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件.
OM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
事件冒泡的应用:事件委托(事件代理)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input type="button" value="更多" id="btn">
<script type="text/javascript">
var oList = document.getElementById("list");
var oBtn = document.getElementById("btn");
var aLi = oList.children;
oList.onclick = function(e){
var evt = e || event;
var _target = evt.target || evt.srcElement;
if(_target.nodeName.toLowerCase() == "li"){
console.log("aa");
}
}
oBtn.onclick = function(){
for(var i = 0; i < 5; i++){
var oLi = document.createElement("li");
oList.appendChild(oLi);
}
}
</script>
</body>
</html>
这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击
事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的,要想使只有点击li的时候
触发事件,就需要用到 Event对象提供了一个属性叫target,可以返回事件的目标节点,
我们成为事件源.
阻止事件冒泡
window.event? window.event.cancelBubble = true : e.stopPropagation();
相当于
if(e.stopPropagation) {
e.stopPropagation();
}else {
e.cancelBubble = true;
}
事件处理程序
1. HTML事件处理程序
这里的HTML事件处理程序指的是直接在HTML元素里面通过特性(attribute)定义的事件处理程序.
2. DOM0级事件处理程序
较为传统的方式:把一个函数值赋值给一个事件处理程序的属性。这种方法用的比较多,
主要是因为它简单而且支持跨浏览器;
3. DOM2级事件处理程序
DOM2级的事件添加事件监听:addEventListener()和 attachEvent()(IE浏览器)
和移除事件监听:removeEventListener()和detachEvent()(IE浏览器)。
分别有三个参数:
1. 事件名(无‘on’)
2. 事件处理程序的函数
3. 布尔值(false:冒泡;true:捕获)
注:
1. DOM0、DOM2级都可以给一个元素添加多个事件和多个事件处理程序,其中多个事件处理程序按照添加顺序执行。
2. IE8及更早的浏览器版本只支持事件冒泡。
事件对象
在触发DOM上的某个事件时,都会产生一个事件对象event。只有在事件处理程序执行期间,
event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。
(1).DOM中的事件对象(兼容DOM的浏览器会将一个event对象传入到事件处理程序中)
1、type属性:用于获取事件类型;
2、target属性:用于获取事件目标;
3、stopPropagation()方法:用于阻止事件冒泡;
4、preventDefault()方法:阻止事件的默认行为;
(2).IE中的事件对象
1、type属性:用于获取事件类型;
2、srcElement属性:用于获取事件的目标;
3、cancelBubble属性:用于阻止事件冒泡;
4、returnValue属性:用于阻止事件的默认行为;