JS事件冒泡、事件绑定、事件监听、事件委托
事件机制
事件绑定
首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
事件绑定的办法：
1.直接在HTML元素绑定，在标签后加onclick = function(){}等
2.在js脚本中绑定，获取元素后绑定事件
3.DOM绑定，添加事件监听
第一种无法删除，不好维护
第二种无法删除，维护性一般
第三种可以删除，维护性一般
在DOM中直接绑定
可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。
<input type="button" value="click me" onclick="hello()">
<script>
function hello(){
alert("hello world");
}
</script>
js代码绑定事件
可以使js代码和HTML标签分离，使文档结构清晰，便于开发管理
<input type = "button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
alert("hello world!");
}
</script>
用事件监听绑定事件
用 addEventListener() 或 attachEvent() 来绑定事件监听函数。addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数，但是IE8.0及其以下版本不支持该方法，使用addEventListener()绑定函数时，必须要处理浏览器兼容问题
事件监听
W3C定义了三个事件阶段：捕获阶段、目标阶段、冒泡阶段
W3C规范：
1
语法：element.addEventListener(event,function,useCapture)
event : （必需）事件名，支持所有 DOM事件 。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
<input type="button" value="click me" id="btn1">
<script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
alert("hello world");
}
</script>
IE标准
1
语法：element。attachEvent(event,function)
event：（必需）事件类型。需加“on“，例如：onclick。
function：（必需）指定要事件触发时执行的函数。
<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
</script>
事件监听的优点
1.可以绑定多个事件
1
常规的事件绑定只能执行最后的绑定事件
<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("hello 1"); //不执行
}
btn3.onclick = function(){
alert("hello 2"); //执行
}
</script>
事件监听可以绑定多个事件
<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>
2.可以解除相应的绑定
1
<input type="button" value="click me" id="btn5">
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>
封装事件监听
<input type="button" value="click me" id="btn5">
//绑定监听事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn);
}
}
//移除监听事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn);
}
}
//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1
事件委托（事件代理）
事件委托利用事件的冒泡原理来实现的，事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
事件委托就 是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document），触发执行效果。实际代码中会用到jQuery的live（），delegate()、bind()、on()等。
<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if(target == btn6){
alert(btn5.value);
}
}
事件委托优点
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。
2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。
件冒泡和事件捕获是对同一件事情的不同看法。
如果浏览器采用的是事件冒泡，那么触发顺序是C–>B–>A，由内而外，像气泡一样，从水底浮向水面；如果采用的是事件捕获，那么触发顺序是A–>B–>C，从上到下，像石头一样，从水面落入水底。
