• 事件2


    常用的事件:onmouseover、onmouseout、onmousedown、onmousemove、onmouseup、onclick、onchange、onfocus、onblur等等

    每个元素身上的事件是天生自带的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发时就会执行这个方法

    事件绑定的方法:

      1.div.onclick=function(){}

      2.div.addEventListener()或div.attachEvent()

     二者区别:

      onclick是私有属性,天生自带的;而div。addEventListener()和div.attachEvent()是公有属性。从EventTarget(事件源)对象上继承,IE低版本的的attachEvent是公有的。

      div.onclick 存在事件冒泡机制没有捕获机制

      div.addEventListener()可有冒泡,可有捕获

      div.attachEvent()只有冒泡直接

    div.addEventListener()和div.attachEvent()的区别

      1.前者有冒泡和捕获,后者只有冒泡机制

      2.事件名前者不带on,后者带on

      3.前者的this执行当前元素,后者的this指向window。

      4.前者是标准浏览器的写法,后者是IE8 以下的写法

    mouseevent有兼容性:

      标准浏览器可以直接读取,但IE不行。解决方法:
      document.onclick=function(e){
        var ev=e||window.event
      }

    event对象的兼容性:  

      clientX和clientY是鼠标到浏览器窗口的左上角的距离

      pageX和pageY是鼠标到网页左上角的距离坐标,但IE 低版本没有这个属性

      在IE下怎么算IE的值?用client+scrollTop

    事件源:点击那个元素,那个元素就是事件源

      标准浏览器的事件源是ev.target

      IE6-8没有这个属性,但是IE有ev.srcElement

    阻止事件冒泡的兼容性写法

      1.event.cancelBUbble=true

      2.event.stopPropagation?event.stopPropagation():event.cancelBUbble=true

    阻止事件默认行为的兼容性

      Event.preventDefault?Event.preventDefault():event.returnValue=false

    事件委托:如果子元素身上绑定大量相同的事件,我们尽量采用事件委托,所有子元素把自己的事件委托给父级了
      原理:采用事件冒泡机制完成
      为什么使用事件委托呢?
       答:传统的for循环绑定事件,会增加大量的dom操作(事件)会影响页面性能,采用事件委托就是把所有的事件基于一个元素上
    事件委托和事件绑定的优势:
      1.传统的事件绑定对新增元素不起作用,事件委托起作用
      2.传统的事件绑定,有多少元素js就需要绑定多少事件,事件委托只需要一个事件

  • 相关阅读:
    mysql日常~gh-ost使用
    redis基础篇~哨兵
    zeppelin-0.6.0安装配置
    spark 好文链接
    spark API 介绍链接
    solr5.5 基于内置jetty配置 Ubuntu
    Gollum 安装笔记
    手机版测试
    win7 eclipse 调试storm
    (转)Storm UI 解释
  • 原文地址:https://www.cnblogs.com/qinmengyang/p/js21.html
Copyright © 2020-2023  润新知