javascript -- 事宜--事宜流-- 冒泡 --捕捉

2019年8月24日 115次阅读 来源: 镰月

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事宜捕捉与冒泡原理图

《javascript -- 事宜--事宜流-- 冒泡 --捕捉》

DOM事宜流：同时支撑两种事宜模子：捕捉型事宜和冒泡型事宜，然则，捕捉型事宜先发作。两种事宜流会触及DOM中的一切对象，从document对象最先，也在document对象完毕。

W3c明智的在这场争斗中挑选了一个择中的计划。任何发作在w3c事宜模子中的事宜，首是进入捕捉阶段，直到到达目的元素，再进入冒泡阶段

你能够挑选是在捕捉阶段照样冒泡阶段绑定事宜处置惩罚函数，这是经由过程addEventListener()要领完成的，假如这个函数的末了一个参数是true，则在捕捉阶段绑定函数，反之false(默许)，在冒泡阶段绑定函数。

固然IE作为前端递次员的口诛笔伐者天然如上面所说只支撑冒泡阶段实行, 但是令人高兴的是从IE9 微软拥抱 w3c 跟着谷歌的兴起 chrome已站到浏览器的半壁河山, IE678 逐渐走出汗青, 无疑给是前端开辟的福音

    原文作者：镰月
    原文地址: https://segmentfault.com/a/1190000013176643
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞