javascript -- 事件--事件流-- 冒泡 --捕获

javascript -- 事件

事件是js和用户操作交互的桥梁,

JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型

内联模型

这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的，并没有与 HTML 分离。

//在 HTML 中把事件处理函数作为属性执行 JS 代码
    <input type="button" value="按钮" onclick="alert('Lee');" /> //注意单双引号

脚本模型


由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我
们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。

    var input = document.getElementsByTagName('input')[0]; //得到 input 对象
    input.onclick = function () { //匿名函数执行
    alert('Lee');
    };

直接接收 event 对象，是 W3C 的做法，IE 不支持，IE 自己定义了一个 event 对象，直接在 window.event 获取即可。

    div.onclick = function (evt) {
    var e = evt || window.event; //实现跨浏览器兼容获取 event 对象
    if(evt){
        //w3c代码
    } else if (window.event) {
        //ie代码
    }
        
    };

DOM2 级

模型定义了两个方法，用于添加事件和删除事件处理程序的操作：
addEventListener()和 removeEventListener()所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)。

    div.addEventListener('click', function () {
    alert('Lee');
    }, false);
    div.addEventListener('click', function () {
    alert('Mr.Lee');
    }, false);

捕获与冒泡

事件流分为2种:
(1) 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发
(2) 捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

js事件捕获与冒泡原理图

图片描述

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段
你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false(默认)，在冒泡阶段绑定函数。

当然IE作为前端程序员的口诛笔伐者自然如上面所说只支持冒泡阶段执行, 然而令人高兴的是从IE9 微软拥抱 w3c 随着谷歌的崛起 chrome已经站到浏览器的半壁江山, IE678 逐步走出历史, 无疑给是前端开发的福音

javascript -- 事件--事件流-- 冒泡 --捕获