zoukankan      html  css  js  c++  java
  • JS高级:事件冒泡和事件捕获;

    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还是指向原来的指向不变

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

  • 相关阅读:
    Android简易注解View(java反射实现)
    android注解[Jake Wharton Butter Knife]
    Android渠道汇总
    SVN管理规范
    马上着手开发iOS应用程序一 todolist
    MVC记录
    OC中intValue要注意的地方
    将从数组中取到的字符串赋值给了UIImage导致的错误
    一个null引发的错误
    记录一些容易忘记的属性 -- UITabBarController
  • 原文地址:https://www.cnblogs.com/qinlinkun/p/10055085.html
Copyright © 2011-2022 走看看