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规范：

语法：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标准

语法：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.可以绑定多个事件

常规的事件绑定只能执行最后的绑定事件

<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.可以解除相应的绑定

<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，从上到下，像石头一样，从水面落入水底。

事件冒泡如图：

事件捕获如图：

在IE8以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持，可以通过addEventListener((type, listener, useCapture)的useCapture来设定，useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。

阻止事件冒泡