• 事件对象


    事件:浏览器客户端上客户触发的行为都称为事件

    事件对象:当客户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上,我们把它叫事件对象

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

    鼠标到网页左上角的距离坐标:pageX    pageY      但是ie低版本没有这个属性    如 pageY  在ie下用clientY+scrollTop

    event的兼容性:

      document.onclick=function(e){

        var e=e||window.event 

      }

    事件冒泡:当给父子元素的同一事件绑定方法时,触发子元素身上的事件,执行完毕后,也会触发父元素的相同事件,这种传播机制叫事件冒泡

    取消事件冒泡:  event.cancelBubble=true

    事件捕获:当父子元素用addEventListener()绑定同一个事件时,当触发子元素身上的事件,会先触发父级元素,然后在传递给子元素,这种传播机制叫事件捕获

      标准浏览器用addEventListener()      ie低版本用attachEvent()

     二者区别:

      1、addEventListener适合标准浏览器   attachEvent只用在ie8以下

      2、addEventListener事件名不带on    attachEvent的事件名要加on

      3、addEventListener函数里面的this指当前当前元素对象    attachEvent函数里面的this指window

      4、addEventListener有冒泡也有捕获  attachEvent只有冒泡没有捕获

    事件绑定的写法:

      1、div.onclick=function(){}

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

    区别:

      onclick是这个元素私有的属性,天生自带的,而addEventListener()是公有的属性,从EventTarget(事件源)对象上继承来的。

     

      Ie低版本的attachEvent是公有的。

     

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

     

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

     

      div.attachEvent()只有冒泡机制

     

     

    参数对象:arguments        所有鼠标信息都临时存储在这个mouseevent对象上

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

    兼容性:div.onclick=function(ev){

      var ev=ev||window.event

    }

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

      标准浏览器的事件源是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操作(事件)影响页面性能,采用事件委托就是把所有的事件基于一个元素上。

    事件委托和传统的事件绑定的优势

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

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

     

    键盘事件

      onkeydown   onkeyup

    键盘事件触发时,浏览器天生给方法一个叫KeyboardEvent的对象,所有键盘的信息都在这个对象上。

      keyCode  键盘编码

    补:

      oncontextmenu   鼠标右击事件

  • 相关阅读:
    买房的贷款时间是否是越长越好?https://www.zhihu.com/question/20842791
    asp.net cookie and session
    leelazero and google colab
    download file by python in google colab
    physical processor, core, logical processor
    通过powershell操作eventlog
    openxml in sql server
    get the page name from url
    How to Execute Page_Load() in Page's Base Class?
    Difference between HttpContext.Request and Request
  • 原文地址:https://www.cnblogs.com/bokeyanghao/p/10077833.html
Copyright © 2020-2023  润新知