事件2

Posted qinmengyang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件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就需要绑定多少事件,事件委托只需要一个事件










以上是关于事件2的主要内容,如果未能解决你的问题,请参考以下文章

Java学习笔记7.2.2 事件处理 - Swing常用事件

Java学习笔记7.2.2 事件处理 - Swing常用事件

13 js事件2——选择合适的事件

微信小程序学习Course 2 事件

JavaScript之DOM(下)

Java学习笔记7.2.1 事件处理 - Swing事件处理机制