• js事件总结


    1.所有浏览器都支持事件冒泡,所以考虑兼容性,应在冒泡阶段处理事件

    2.事件处理方式有Html事件处理程序、Dom0级、Dom2级、IE8及之前浏览器

    • Html事件处理程序-直接在元素上指定事件及相应的处理程序,例如<input type="button" onclick="alert(value)" value="点我试试"/>或<input type="button" onclick="func()" value="点我试试"/>

    事件后面如果直接跟上具体的处理程序(也就是说处理程序不是封装成函数的)时,可直接访问event对象,this指向当前元素,同时还扩展了this和document的作用域,即访问对象的属性或方法时可以省略this或document

    <input type="button" onclick="getElementById('memo').innerText='2333'" value="点我试试"/>
    • Dom0级事件处理程序-obj.onclick=func(),只支持冒泡阶段,this代表当前发生事件的元素,同一事件如果指定多个处理程序,后面的会覆盖前面的。
    • Dom2级事件处理程序-obj.addEventListener("click",function(){}) 默认是冒泡阶段,第三个参数为true则表示捕获阶段。this代表当前发生事件的元素,可为同一元素指定多个事件处理程序。
    • IE8及之前浏览器-obj.attachEvent("onclick",function(){}),只支持冒泡阶段,this代表window对象

    3.event对象及常用属性的兼容性

    • 标准浏览器通过事件处理程序的参数来获取,IE8-采用window.event来获取
    • target和currentTarget的区别:target指向触发事件的元素,currentTarget指向事件绑定的元素,详情请看这篇
    • event常用属性及方法的兼容性对比

      行为

      标准dom

      IE8及之前的浏览器

      取消事件默认行为

      preventDefault()

      returnValue=false

      阻止事件冒泡

      stopPropagtion()

      cancelBubble=false

      获取事件目标

      target

      srcElement

  • 相关阅读:
    [引]Windows Server 2003 : 服务器群集
    周国平:(爱情)永远未完成
    企业管理常用缩写术语之中英文对照表(含解释)
    微软相关中文网站
    陈安之:NAC神经链调正术
    学会不要再争吵
    Oracle基础学习四:字符串 数字 日期 等 相关函数
    贪多嚼不烂
    frameset 框架传值点滴
    陈安之成功的十个关键
  • 原文地址:https://www.cnblogs.com/94pm/p/9473363.html
Copyright © 2020-2023  润新知