给一个元素绑定事件,普通写法是

obj.onclick=function(){} 这就相当于给obj的onclick属性赋值是一个道理。

obj.onclick=function(){}

这种写法有一点不好,后者会将前者覆盖掉。

事件绑定的第二种写法

标准浏览器用 addEventListener()这个方法

Ie低版本用attachEvent()这个方法

addEventListener(参数1,参数2,参数3)

参数1 是事件名 事件名不能带on

参数2 事件函数

参数3 布尔值,代表捕获不捕获 默认是false 不捕获但是冒泡。

事件捕获

  1. ie低版本没有捕获
  2. 普通事件绑定写法没有捕获

事件捕获

给父子元素用addEventListener()绑定同一个事件时,当触发子元素身上的事件,会先触发父元素,然后在传递给子元素,这种传播机制叫事件捕获。

attachEvent()和addEventListener()二者区别

  1. attachEvent只用在iE8以下,addEventListener()适合标准浏览器
  2. attachEvent的事件名带on 而addEventListener事件名不带on
  3. attachEvent函数里面的this是window,而addEventListener函数里面的this是当前元素对象

attachEvent只有冒泡没有捕获addEventListener有冒泡也有捕获

js··事件捕捉的更多相关文章

  1. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  2. js之捕捉冒泡和事件委托

     以下为转载内容 一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...

  3. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  4. 一次关于js事件出发机制反常的解决记录

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  5. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  6. js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件

    1.绑定 function(element, type, handler){        if (element.addEventListener) {            element.add ...

  7. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  8. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  9. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

随机推荐

  1. Spring错误——Spring 注解——factory-bean reference points back to the same bean definition

    背景:学习Spring,在使用注解@Bean的name属性配置<bean>实例时,不能注册实例成功 报错 WARNING: Exception encountered during con ...

  2. RPM 包的构建 - SPEC 基础知识

    spec 文件 制作 rpm 软件包并不是一件复杂的工作,其中的关键在于编写软件包的 spec 描述文件. 要想制作一个 rpm 软件包就必须写一个软件包描述文件 spec.这个文件中包含了软件包的诸 ...

  3. server time zone

    问题原因 由于使用的Mysql数据库驱动版本太高,存在数据库和系统时区差异,所以出问题. 问题解决 Spring Boot配置文件中在url: jdbc:mysql://127.0.0.1:3306/ ...

  4. scala 入门Eclipse环境搭建

    scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld IDE选择并下载: scala for eclipse 下载: http://scala-ide.org/downloa ...

  5. 3、zabbix配置入门

    Zabbix模板 zabbix组件:    zabbix-server    zabbix-database    zabbix-web    zabbix-agent    zabbix-proxy ...

  6. MVC查看详细数据【四】

    一.本篇文章主要讲解点击详细,将主键id的值传递到后端,或者将多个值传递给后台的三种方式,并且通过id的值在数据库中查找到相对应的数据,赋值给viewData视图. 1. 第一种将主键id的值传递给后 ...

  7. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  8. vue-路由懒加载

    将import ... from..改为 const Foo = resolve => require(['./Foo.vue'], resolve)

  9. FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(me

    FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(me ...

  10. angular js中ng-model时间格式化

    直接上带代码,事实上此时不用ng-model,直接用value即可 <div class="form-group m-b-sm"> <label class=&q ...