事件有三个阶段:
  1.事件捕获阶段 :从外向内
  2.事件目标阶段 :最开始选择的那个
  3.事件冒泡阶段 : 从里向外
 
为元素绑定事件
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
  1、window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
    window.event就是一个对象,是IE中的标准
 
  2、e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
 
window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
 
addEventListener中第三个参数是控制事件阶段的
事件的阶段有三个:
  通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
    如果这个属性的值是:
        1---->捕获阶段
        2---->目标阶段
        3---->冒泡阶段
    一般同时只能出现1-2 、2-3 不可能同时出现1-3
 
一般默认都是冒泡阶段,很少用捕获阶段 所有 addEventListener中第三个参数(false)
 
冒泡阶段:从里向外
捕获阶段:从外向内

js 事件的阶段的更多相关文章

  1. js中事件三阶段

    js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. js事件的捕获和冒泡阶段

    讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到ParentNode. <div id ...

  3. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  4. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  5. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  6. JS事件模型小结

    三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...

  7. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  8. JS事件详解

    hello,我是沐晴,最近呢,来总结一下 JS中的常用的事件,希望我们都能一起查漏补缺. 焦点事件 焦点事件在表单中经常用到,那什么是焦点呢?比如我们文本框里面的有光标的时候,就是获得了焦点,我们就可 ...

  9. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

随机推荐

  1. 14-EasyNetQ之用Future Publish发布预定中事件

    很多商业流程需要事件在未来的时间按照预定时间发布.例如,在初次与客户接触后,可以在未来某个时间去电话回访客户.EasyNetQ可以用它的Future Publish功能帮你实现这个功能.举例:这里我们 ...

  2. SQL和NoSQL

    SQL和NoSQL 目前的数据库系统非常多,有传统的关系型的数据库系统(又被称为SQL数据库系统),有最近几年流行起来的NoSQL数据库系统.其中NoSQL数据库系统又分为很多种不同的类型,根据各个系 ...

  3. 最小的VIM操作指南

    最小VIM操作指南 vim的操作命令非常多,为了能开始工作,必须学会一个最小的vim操作集合,这里做个总结. 1.插入.追加.插入新行 i:在当前光标所在字符的前面插入,当前字符及其后面的字符后撤 a ...

  4. sql 在存储过程中使用事务(转)

    本来想自己写一下,后来发现这个写的比我理解的要好,所以直接拽过来了,链接地址:https://www.cnblogs.com/RascallySnake/archive/2010/05/17/1737 ...

  5. Leetcode:Longest Substring Without Repeating Characters分析和实现

    题目大意是传入一条字符串,计算出这样的这样一条子字符串,要求子字符串是原字符串的连续的某一段,且子字符串内不包含两个或两个以上的重复字符.求符合上面条件的字符串中最长的那一条的长度. 首先注意到任意一 ...

  6. Druid配置属性列表及含义

    前两天,在排查springBoot使用双数据源出现的运行一段时候出现了数据库连接断开的问题的时候,查了很多关于Druid数据库连接池配置的文章,虽然最后问题的原因不是属性配置的问题,也可以说是 属性配 ...

  7. 10、差异基因topGO富集

    参考:http://www.biotrainee.com/thread-558-1-1.html http://bioconductor.org/packages/3.7/bioc/ http://w ...

  8. Smarty3——内置函数

    Table of Content {$var} {$append} {assign} {block} {call} {config_load} {debug} {extends} {for} {for ...

  9. 1.python系统性能信息模块之psutil模块

    Psutil(进程和系统实用程序)是一个跨平台的库,用于在Python中检索有关运行进程和系统资源利用率(CPU,内存,磁盘,网络)的信息.它主要用于系统监视,分析和限制系统资源及运行进程的管理.它实 ...

  10. HttpRuntime.Cache

    a.在Web开发中,我们经常能够使用到缓存对象(Cache),在ASP.NET中提供了两种缓存对象,HttpContext.Current.Cache和HttpRuntime.Cache,那么他们有什 ...