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

leeon 发布于2019-08-26 11:38 / 2560人阅读

摘要：在内联模型中，事件处理函数是标签的一个属性，用于处理指定事件。事件捕获与冒泡原理图事件流同时支持两种事件模型捕获型事件和冒泡型事件，但是，捕获型事件先发生。

javascript -- 事件

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

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

内联模型

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

//在 HTML 中把事件处理函数作为属性执行 JS 代码
     //注意单双引号

脚本模型

由于内联模型违反了 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事件流冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107294.html

javascript 事件流捕获与冒泡

摘要：捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为绑定事件首先我们要先绑定事件绑定事件有三种 1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseov...

DC_er 2019-08-22 18:49 评论0 收藏0
javascript 事件流捕获与冒泡

摘要：捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为绑定事件首先我们要先绑定事件绑定事件有三种 1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseov...

aboutU 2019-08-30 15:54 评论0 收藏0
JavaScript-浅谈DOM事件流

摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。什么是事件？（敲黑板）事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动... 什么是事件...

haitiancoder 2019-08-20 10:49 评论0 收藏0
理解DOM事件流的三个阶段

摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。本文主要解决两个问题：什么是事件流 DOM事件流的三个阶段起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...

xiangzhihong 2019-08-19 17:38 评论0 收藏0