绑定事件的模型
种事件流模型
1，冒泡事件流模型：从特定的事件到不特定事件，即从Dom树的叶子到根节点
2，捕获事件流模型：从不特定的事件到特定的事件，即根节点到Dom树的节点
从冒泡型事件流中click事件流的顺序为：div->body->html->document
从捕获型事件流中click事件流的顺序为：document->html->body->div;
DOM2的事件流的顺序
事件捕获->目标对象->事件冒泡
3，事件流的案例事件代理-事件委托
优点：
1，通过冒泡的思想减少了对子节点绑定的特点，不用使用for循环，
2，而是对父节点进行绑定，事件处理器要驻流内存，提高了性能
原生的案例
捕获事件->目标对象（2次）——>事件冒泡
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
#outer {
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background-color: deeppink;
}
#middle {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: deepskyblue;
}
#inner {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
;
background-color: darkgreen;
text-align: center;
line-height: 100px;
color: white;
}
#outer,
#middle,
#inner {
border-radius: 100%;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
click me!
</div>
</div>
</div>
<script>
var innerCircle = document.getElementById("inner");
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在捕获阶段被触发");
}, true);
innerCircle.addEventListener("click", function () {
alert("innerCircle的click事件在冒泡阶段被触发");
}, false);
var middleCircle = document.getElementById("middle");
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在捕获阶段被触发");
}, true);
middleCircle.addEventListener("click", function () {
alert("middleCircle的click事件在冒泡阶段被触发");
}, false);
var outerCircle = document.getElementById("outer");
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在捕获阶段被触发");
}, true);
outerCircle.addEventListener("click", function () {
alert("outerCircle的click事件在冒泡阶段被触发");
}, false);
</script>
</body>
</html>
一、原生的写法
var handleEent = {
addEventListener: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(type, handler);
} else {
element['on' + type] = handler;
}
},
removeEentListener: function (element, type, handler) {
if (element.removeEentListener) {
element.removeEentListener(type, handler, false);
} else if (element.deattachEvent) {
element.deattachEvent(type, handler);
} else {
element['on' + type] = handler;
}
}
};
二、 jquery的绑定事件处理方案， jquery的绑定的事件（on, bind(), delegate(), live() ）的区别
1，bind：只能用于存在元素的绑定
2，live：采用事件代理绑定到，document上
3，delegate: 采用的是事件代理，将元素更加精确小的范围内使用事件代理
4，on: 集中了以上所有的优点
