zoukankan      html  css  js  c++  java
  • JS高级(2)事件对象

                               JS事件对象 事件委托

    1.常用的事件:

      onmouseover onmousedown ......

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

    3.事件绑定的写法:

      (1)div.onclick=function(){} DOM0级事件绑定

      (2)div.addEventListner()或div.attachEvent() DOM2级事件绑定

      二者的区别:

        <1>onclick是这个元素的私有属性,而addEventListner()是公有的属性,从event target(事件源)对象上继承来的。IE低版本的attachEvent()是公有的。

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

          div.addEventListner可有冒泡可有获取,div.attachEvent只有冒泡机制。

    4.div.addElementListner()和div.attachEvent()的区别:

      (1)前者有冒泡和捕获机制,后者只有冒泡机制;

      (2)事件名前者不带on,后者带on;

      (3)前者this指向当前元素,后者指向window;

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

    Arguments

      每个函数都有一个arguments对象,他是这个函数所有参数构成的集合。

      

     上面的控制台是arguments数组中有一个元素叫MousEevent。

      所以,每一个事件的方法中,浏览器都给它一个参数叫MouseEvent.我们所有鼠标的信息都临时存储在这个MouseEvent对象上。

     MouseEvent有兼容性,标准浏览器可以直接读取,但是IE不行。

      解决办法:

            

    event对象的兼容性

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

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

         在IE下怎么算pageY的值,用clientY+scrollTop.

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

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

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

    阻止事件冒泡兼容性:

      (1)event.cancelBubble=true

      (2)event.stopPropagation():event.canvelBubble=true;

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

      比如a的href

        href为空,会自动刷新页面;

        href为#  锚点跳转;

        href为Javascript:;阻止默认行为的发生。

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

     5.不是所有的事件都存在事件冒泡 onmouseenter和onmouseleave没有,所以我们做跟随鼠标的时候尽量用这两个,不要用onmouseover和onmouseout.

    事件委托

     1.如果子元素身上绑定大量相同的事件,我们尽量采用事件委托,所有子元素把自己的事件委托给父级了

        原理:采用事件冒泡机制完成的。

      2.为什么使用事件委托?

      传统的for循环绑定事件,会增加大量的DOM操作,影响页面性能,采用事件委托就是把所有事件基于一个元素上。

      事件委托和传统的事件绑定相比,它的优势:

      (1)传统的事件绑定对新增元素不起作用,事件委托起作用。

      (2)传统的事件绑定,有多少元素就需要绑定多少事件,事件委托只需要一个事件。

    案例:

        

     传统的事件绑定:

      

      事件委托:

       事件委托建议采纳

  • 相关阅读:
    (Java实现) 洛谷 P1106 删数问题
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    (Java实现) 洛谷 P1051 谁拿了最多奖学金
    (Java实现) 洛谷 P1051 谁拿了最多奖学金
    (Java实现) 洛谷 P1106 删数问题
    目测ZIP的压缩率
  • 原文地址:https://www.cnblogs.com/yuanjingjing/p/10057517.html
Copyright © 2011-2022 走看看