• 事件


    1、给标签绑定事件或解除事件

      event:表示事件的状态

      event.target:表示触发事件的标签

      event.currentTarget:表示绑定事件的标签

    (1)el.addEventListener('click',fun,false)、

      第三个参数设置成false就是事件冒泡,设置成true就是事件捕获

      fun函数中的this指向el标签

      可以为一个事件绑定多个处理函数

      IE9以下不兼容

      解除事件:el.removeEventListener('click', test, false)

      实例1:

        el.addEventListener('click', function(){console.log(1111)}, false)

        el.addEventListener('click', function(){console.log(1111)}, false)

        // 点击el标签,显示两个1111

      实例2:

        el.addEventListener('click', test, false)

        el.addEventListener('click', test, false)

        function  test(){console.log(1111)}

        // 点击el标签,显示一个1111

    (2)el.attachEvent('onclick', func)

      func中的this指向window

      IE独有,一个事件同样可以绑定多个处理函数

      解除事件:el.detachEvent('onclick', test)

      实例1:

        el.attachEvent('onclick',function(){console.log(1111)})

        el.attachEvent('onclick',function(){console.log(1111)})

        // 点击el标签,显示两个1111

      实例2:

        el.attachEvent('onclick', test)

        el.attachEvent('onclick', test)

        function  test(){console.log(1111)}

        // 点击el标签,显示两个1111

    (3)el.onclick  =  function  (event){}

      函数this指向el

      兼容性很好,但是一个标签的同一个事件上只能绑定一个处理函数

      解除事件:el.onclick  =  null

    (4)在标签上直接加事件

      <div  onclick="console.log(11111)"></div>

    2、事件处理模型

      触发顺序:先捕获,后冒泡

      (1)事件冒泡

        结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素(自底向上)

        focus、blur、change、submit、reset、select等事件不冒泡

      (2)事件捕获

        结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(自顶向下)

    3、阻止事件冒泡

      (1)W3C标准,阻止事件冒泡

        event.stopPropagation( )

        IE9以下不兼容

      (2)IE标准,阻止事件冒泡

        event.cancelBubble  =  true

    4、阻止事件的默认行为

      (1)return  false;  以对象属性的方式注册事件才生效

      (2)event.preventDefault( );  W3C标准,IE9以下不兼容

      (3)event.returnValue  =  false;  兼容IE

    5、事件属性兼容   

      var  event  =  e  ||  window.event;

      var  target  =  event.target  ||  event.srcElement

    6、鼠标事件

      (1)事件类型

        click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave

      (2)用event中的button属性来区分鼠标的按键,event.button是0表示左键,是2表示右键,是1表示滚轮 

      (3)click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键

    7、键盘事件

      keydown、keyup、keypress

      执行顺序:keydown > keypress > keyup

      keydown和keypress的区别

      keydown可以响应任意键盘按键,keypress只可以响应字符类键盘按键

      keypress返回asc码,可以转换成响应字符

    8、文本操作事件

      input、focus、blur、change

    9、window上的事件

      scroll、load  

  • 相关阅读:
    dojo/Deferred类和dojo/promise类的使用
    dojo中类的继承
    c# 委托
    使用Spring Data JPA报错:javax.persistence.TransactionRequiredException: Executing an update/delete query
    服务器重启后,Docker安装的mysql怎么重启?
    IDEA开启Run Dashboard的配置
    Java中List集合去重的几种方式
    关闭迅雷更新到新版本的提示
    XMind8 破解激活教程(win系统)
    连接Oracle报错 ORA-12638: 身份证明检索失败
  • 原文地址:https://www.cnblogs.com/cuishuangshuang/p/13289569.html
Copyright © 2020-2023  润新知