js事件

js操作css称作脚本化css, js和html的交互通过事件来完成。事件就是文档或者浏览器窗口中发生的特定的交互瞬间。

• 事件流（事件传播）描述的是从页面中接收事件的顺序。

  IE的事件流是事件冒泡流（从小到大），Netscape的事件流是事件捕获流（从大到小）。

• • 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素（如body, html）。div->body->html ->document->window. 所有的现代浏览器都支持。

  • 事件捕获：由不太具体的节点最早接收事件，最具体的节点最后接收事件。

    

  ele.addEventListener(‘click’, function() {}, false/true): 第三个参数，true表示捕获阶段，false表示冒泡阶段，默认为false

  事件流分为3个阶段：捕获，目标，冒泡

  • 事件处理程序：HTML事件处理程序，DOM0级事件处理程序，DOM2级事件处理程序，IE事件处理程序。

    HTML事件处理程序：缺点：js和html混在一起，不容易维护

    1. <div onclick=’test()’/>
    2. <div onclike=”this.innerHTML += event.type”/>
    3. <button value=’xxx’ onclick=”this.innerHTML += value”/>

    Dom0级事件处理程序,只发生在冒泡阶段。优点：简单，跨浏览器

    var ele = document.getElementById('box')
    ele.onclick = function() {
        this.innerHTML += 1;
    }

    缺点：存在事件覆盖

    Dom2级事件处理程序：定义了两个方法，1. addEventListener, 2. removeEventListener. 支持多个eventListener, 不会发生覆盖。 但是IE8浏览器不支持Dom2级事件处理程序。

    正确移除事件监听器的方法：

    function handler() {
        this.innerHTML += 1;
    }
    ele.addEventListener('click', handler, false);
    ele.removeEventListener('click', handler, false);

    IE事件处理程序：attachEvent, detachEvent. 两个参数：1. 事件名（事件名类似于onclick） 2. 事件处理程序。默认只在冒泡阶段。只有IE10及以下支持。而且事件处理程序里的this指向的是window, 不是被点击元素。移除函数的写法同dom2级事件处理程序。

    

    如果同时出现html事件处理程序和dom0级事件处理程序，dom0会覆盖html事件处理程序。