谈谈事件对象-event

时间:2023-03-08 22:22:20

JavaScript 中的事件对象(event)

当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event。今天就来来谈谈。
1、当我们想判断当前事件是我们想要的事件类型时,可以使用type属性,表示当前事件的类型,如click,mousedown,mouseup等;
2、当我们想获取当前的坐标可以使用clientX和clienY,offsetX和offsetY,pageX和pageY,screenX和screenY。
  client:以浏览器(当前窗口)左上角为参考点(所以肯定不包括滚动距离);
  screen:鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
  page:是以body元素为参考点(所以肯定包括滚动距离);
  offset:以事件触发元素内界的左上角为参考点(肯定包括滚动距离)  当有边框时,可能出现负数  
3、有时候需要使用父元素对多个元素实现事件代理,这时可以通过target属性获取当前触发的DOM元素,从而得到更多的想要你的数据。
4、阻止事件冒泡:stopPropagation()
  这里要先说一个事件冒泡的概念:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序。

  如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

  通常情况下我们都是明确自己的事件触发源,并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序,即我们明确最精准目标,这种情况下我们不需要事件冒泡。还有另一个方面:事件冒泡处理可能会激活我们本来不想激活的事件,导致程序错乱,甚至无从下手调试,这常成为对事件冒泡不熟悉程序员的棘手问题。

  注意并不是所有的事件都会冒泡:如blur,focus,load,unload等。而且阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。因此有时候就得用到阻止事件的默认属性。
5、阻止事件的默认属性:preventDefault()
  用来阻止默认的属性,如a默认会跳转。