美文网首页
浏览器事件机制

浏览器事件机制

作者: pz明 | 来源:发表于2017-06-15 10:47 被阅读245次

一、概述

浏览器事件流存在三个阶段:捕获阶段、目标阶段、冒泡阶段,捕获和冒泡是事件传播的两种截然相反的方式。

二、什么是捕获和冒泡

见以下例子:

<div class="parent">
    <div class="child"></div>
  </div>

此结构中,点击子元素:
  捕获机制中,事件从document一直向点击的元素传播,直到被点击元素。
  冒泡机制中,事件从被点击元素逐层向其父元素传播,直到根节点。
 简单的说,捕获机制由外向内传播,冒泡机制由内向外传播。

三、事件绑定

 传统绑定方法:onclick,使用的是冒泡机制,并且一个事件只能绑定一个函数(如需执行多个函数,可在外层函数内定义多个函数)
 非IE中用addEventListener(eventName,callback,isCapturing)绑定事件,IE8以下不支持此方法,最后的isCapturing参数true表示采用捕获机制,false表示采用冒泡机制,不写第三个参数默认为false,即默认采用冒泡机制,可以为一个事件绑定多个响应函数。
 由于IE8以下不支持addEventListener,事件绑定采用IE自有的attachEvent(eventName,callback),可以看到此函数无第三参数,无法指定事件处理机制,默认使用捕获机制处理。值得注意的是,自IE11起已不支持此方法,应当使用W3C标准规定的addEventListener方法。

1.基础回顾-浏览器事件机制
2.JavaScript 详说事件机制之冒泡、捕获、传播、委托
3.javascript事件机制详解

相关文章

  • --

    react事件机制 react基于浏览器原生事件机制,封装了一套自己的事件机制,包括事件注册、事件合成、冒泡和捕获...

  • JavaScript 异步编程的几个方法

    原文地址基于浏览器事件轮回机制(以及nodejs中的事件轮询机制),JavaScript常常会运行在异步环境中。而...

  • 阻止浏览器事件冒泡

    不同的浏览器对事件的解析机制不同,所以就会触发不同的事件,影响我们操作,如何取解决浏览器事件冒泡 ,所谓的事件冒泡...

  • 16.3 JavaScript的执行机制

    浏览器事件轮询机制 js执行为单线程 网络请求、setTimeout、addEventListener属于异步事件...

  • 2020最新面试题

    1.react生命周期 新特性 redux router 2.js事件运行机制 3.浏览器缓存机制 4.浏览器存...

  • 浏览器事件机制

    本意是讲 react 事件机制的,但仔细想想..我连浏览器本身的事件机制也不是十分清晰 事件传播 事件传播的三个阶...

  • 浏览器事件机制

    浏览器事件机制(即冒泡和捕获,也称为事件流) 基础知识 操作系统最先知道用户点击了鼠标,浏览器次之 child 被...

  • 浏览器事件机制

    一、概述 浏览器事件流存在三个阶段:捕获阶段、目标阶段、冒泡阶段,捕获和冒泡是事件传播的两种截然相反的方式。 二、...

  • 浏览器事件机制

    概述 浏览器事件传播存在三个阶段:捕获阶段,目标阶段,冒泡阶段 捕获阶段:从window对象派发到事件目标的父级的...

  • 浏览器和Node事件循环的区别

    事件循环,是 js 中老生常谈的一个话题了,而在浏览器和 Node 中的事件循环执行机制也不相同,浏览器的事件循环...

网友评论

      本文标题:浏览器事件机制

      本文链接:https://www.haomeiwen.com/subject/buceqxtx.html