事件

事件流的概念

1. HTML事件处理程序

   HTML事件处理程序是指在HTML标签内部，通过指定onclick之类的属性来指定，属性的值是可以被执行的JS字符串代码，或者是在页面其他地方定义好的函数。 这种事件处理程序，其内部有一个局部变量event用于访问事件对象，this等于事件的目标元素（onclick所在的元素节点） 事件处理程序的缺点是加载的时候可能还不具备条件执行代码，以及耦合程度太高，混杂了页面结构与行为，所以不推荐使用该方法，就和不推荐使用CSS的内联样式一个原理。
2. DOM 0级事件处理程序

   这种事件处理程序，就是通过JS给目标元素绑定事件处理程序，不写死在HTML标签里，而是动态的设置类似onclick这种属性为JS代码来执行。

   用这种方法绑定的代码，被认为是在目标元素的作用域中执行，所以其内部this代表当前元素。 如果想取消事件，就将事件响应函数的属性值设置成null DOM 0级事件处理程序是普通web页面常用的做法，有效的降低了JS代码与HTML的耦合程度。但缺点是依然采用具体属性，而且只能绑定一个事件处理程序。
3. DOM 2级事件处理程序 这是比较好的添加事件方法，不再局限于操作标签属性，还可以添加多个事件处理程序。有两个主要方法：
   • .addEventListener(event,handler,boolean)
   • .removeEventListener(event,handler,boolean)
   第一个参数是事件的名称，比如"click"，第二个参数是函数名或者函数代码，第三个参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序 这两个方法在使用前都需要先定位元素，addEventListener(event,handler,boolean)用于给目标元素绑定事件，可以反复调用该方法来绑定多个事件，事件会按照绑定的顺序触发。 removeEventListener(event,handler,boolean)用于给目标元素去除事件，只能去掉由addEventListener(event,handler,boolean)添加的事件。由于必须传入函数名，所以addEventListener(event,handler,boolean)给目标元素添加的匿名事件处理程序无法去除。 关于最后一个参数的问题。一般都是在冒泡阶段处理事件，除非明确的知道确实要在捕获阶段就处理事件，否则都将事件放到冒泡阶段处理即可。

event 事件对象 

<div id = 'div' style="border: black solid 1px">我是DIV。
    <p id="para">我是P元素
         <button id="button" type="button">我是按钮</button></p>
</div>

div = document.getElementById("div");
para = document.getElementById("para");
button = document.getElementById("button");
div.addEventListener('click',test,false);
para.addEventListener('click',test,false);
button.addEventListener('click',test,false);
function test(event) {
    console.log(this);
    console.log(event.currentTarget);
    console.log(event.target);
}

div = document.getElementById("div");
para = document.getElementById("para");
button = document.getElementById("button");

div.addEventListener('click',first,false);
div.addEventListener('click',second,false);
para.addEventListener('click',first,false);
para.addEventListener('click',second,false);
button.addEventListener('click',first,false);
button.addEventListener('click',second,false);
function first(event) {
    console.log("这是第一个事件,来自于："+event.currentTarget.tagName);
    event.stopPropagation();
}

function second(event) {
    console.log("这是第二个事件,来自于："+event.currentTarget.tagName);
}

button = document.getElementById("button");
button.addEventListener('click',handler,false);
button.addEventListener('mouseover',handler,false);
button.addEventListener('mouseout',handler,false);

function handler(event) {
    event.stopImmediatePropagation();
    switch (event.type) {
        case "click":
            event.currentTarget.style.color="red";
            break;
        case "mouseover":
            event.currentTarget.style.backgroundColor="green";
            break;
        case "mouseout":
            event.currentTarget.style.backgroundColor="red";
            event.currentTarget.style.color="";
            break;
    }
}

事件类型

事件委托

<ul id="ul1">
    <li id="li1">第1个元素</li>
    <li id="li2">第2个元素</li>
    <li id="li3">第3个元素</li>
    <li id="li4">第4个元素</li>
</ul>

<script>
    ul = document.getElementById("ul1");
    ul.addEventListener("click",handle,false);

    function handle(event) {
        event.stopImmediatePropagation();
        if(event.target.tagName=== "LI"){
            console.log('执行处理来自'+ event.target.id+'的单击');
        }else{
            console.log("单击了ul元素，不进行操作");
        }
    }
</script>

模拟事件

总结