1、事件:浏览器客户端上客户触发的行为成为时事件;所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发

当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做事件对象

2、获取鼠标的坐标

event.clientX;event.clientY

document.onclick=function(){

    event.clientX

    event.clientY

}

3、关于event的兼容性

标准:event是undefined

非标准:null

解决兼容: var e=e||windoe.event

4、事件冒泡:

当给父子元素同一事件绑定方法的时候,触发了子元素的事件,执行完毕后,也会触发父级元素的相同时间,这种传播机制叫做事件冒泡

取消事件冒泡:event.cancelBubble=true

5、事件捕获:

给父子元素用addEventLIstener()绑定统一个事件,会先触发父元素,然后再传递给子元素,这种传播机制叫做事件捕获

(1)IE低版本没有事件捕获

(2)普通的事件绑定写法没有事件捕获

给元素绑定事件,有两种

(1)常用的写法:

obj.onclick=function(){}

这个写法有缺点,如果一个元素绑定相同的事件多次,后者会覆盖前者,因此这个写法相当于给obj的onclick的属性赋值

(2)第二种写法

标准浏览器用:addEventListener()

非标准用:attachEvent()

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

参数1:事件名,并且不带"on"

参数2:事件函数

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

attathEvent()和addEventListener()的区别

(1)attachEvent()只用在IE8以下,addEventListener()适合标准浏览器

(2)attachEvent()的事件名带on,addEventListener()的事件名不带on

(3)attachEvent()函数里面的this是undefined,addEventListener()的函数里面的this是当前元素对象

(4)attachEvent()只有冒泡没有捕获,addEventListener()有冒泡也有捕获

call和apply

都是改变this的指向的方法,而且是函数对象、类、构造函数

call和apply的第一个参数是null的时候,函数里面的this还是指向原来的指向不变

所有的事件都是异步的!!!

JS高级:事件冒泡和事件捕获;的更多相关文章

  1. js高级:event,事件冒泡,事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  2. JS事件(事件冒泡和事件捕获)

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  3. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  4. JS事件冒泡与事件捕获怎么理解?

    在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...

  5. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  6. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  7. 彻底弄懂JS的事件冒泡和事件捕获

      先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false; ...

  8. 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  9. JS事件冒泡和事件捕获的详解

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...

随机推荐

  1. JAVAWEB 一一ibatis(框架)

    ,升级版是mybatis,在配置文件里写sql语句对字段进行CURD) jar包 sqlMapConfig <?xml version="1.0" encoding=&quo ...

  2. 安装eclipse版本oxygen,及maven导入spring mvc项目并运行

    本文地址为:http://www.cnblogs.com/jying/p/7511598.html 系统环境: win10 eclipse版本:2017.09.11 官网下载版本号为 oxygen 1 ...

  3. C# 图像处理:Bitmap 与 Image 之间的转换

    Image img = this.pictureBox1.Image; Bitmap map = new Bitmap(img); Image img = Bitmap; Image和Bitmap类概 ...

  4. JAVA 课堂测试

    package ACC; /*信1705-2班 * 20173623 * 赵墨涵 */ public class Account { String accountID; String accountn ...

  5. 修改redis 持久化路径和日志 路径 ,修改kafka日志路径

    redis修改持久化路径和日志路径 vim redis.conf logfile /data/redis_cache/logs/redis.log #日志路径 dir /data/redis_cach ...

  6. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  7. 设计table表格,用js设计偶数行和奇数行显示不同的颜色

    第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  8. break

    public class b {   public static void main(String[] args) {  int i=0;  for(;i<=10;i++){   if (i&g ...

  9. Java获得数据库查询结果的列数和行数,打印查询结果

    Java连接数据库及简单操作见我以前的一篇随笔:http://www.cnblogs.com/meitian/p/5036332.html   一.获取查询结果的行数和列数 查询结果为ResultSe ...

  10. getHibernateTemplate()的用法 (转)

    在spring 中获得由spring所配置的hibernate的操作对象,然后利用此对象进行,保存,修改和删除等操作, 此方法是在配置了spring以后,hibernate由spring接管,不直接使 ...