event

在 JavaScript 中,event 是一个常见的事件对象,它代表了当前正在处理的事件。当用户与网页交互时,例如点击鼠标、按下键盘、滚动页面等操作时,会触发各种事件,此时浏览器会创建一个事件对象并传递给事件处理程序,开发者可以通过 event 对象获取事件的相关信息。

event 对象有许多属性和方法,其中一些常见的属性和方法包括:

  • event.target:获取事件的目标元素,即事件最初发生的元素。
  • event.type:获取事件的类型,例如 "click"、"keydown" 等。
  • event.clientXevent.clientY:获取鼠标相对于浏览器窗口左上角的坐标。
  • event.keyCode:获取键盘按键的键码值。
  • event.preventDefault():阻止事件的默认行为,例如阻止链接跳转、表单提交等。
  • event.stopPropagation():停止事件在 DOM 树中的传播,防止事件冒泡。
  • event.stopImmediatePropagation():立即停止事件在 DOM 树中的传播,同时阻止后续的事件处理程序执行。

需要注意的是,不同的事件类型会有不同的属性和方法,有些属性和方法只在特定的事件类型中才能使用。此外,event 对象只在事件处理程序中有效,如果需要在其他函数中使用event 对象,需要将它作为参数传递进去。

<!DOCTYPE html>
<html>
<head>
  <title>Event Example</title>
</head>
<body>
  <button id="myButton">Click me!</button>
  <script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function(event) {
      console.log('The button was clicked!');
      console.log('Target element:', event.target);
      console.log('Event type:', event.type);
      console.log('Mouse position:', event.clientX, event.clientY);
      console.log('Key code:', event.keyCode);
      event.preventDefault();
    });
  </script>
</body>
</html>

在上面的示例中,当用户点击按钮时,会触发 "click" 事件,浏览器会创建一个 event 对象并传递给事件处理程序。在事件处理程序中,我们可以通过 event 对象获取按钮元素、事件类型、鼠标位置等信息,并阻止事件的默认行为。

在 JavaScript 中,可以通过事件处理程序中的 stopPropagation()preventDefault()captureoncepassive 等参数来控制事件的行为。

  1. stopPropagation() 方法用于阻止事件冒泡,即阻止事件从子元素向父元素传递。
element.addEventListener('click', function(event) {
  event.stopPropagation();
});

在以上代码中,当用户单击 element 元素时,事件处理程序会阻止事件冒泡,即阻止事件传递到 element 的父元素。

  1. preventDefault() 方法用于取消事件的默认行为,例如阻止链接的默认跳转、表单的默认提交等。
element.addEventListener('click', function(event) {
  event.preventDefault();
});

在以上代码中,当用户单击 element 元素时,事件处理程序会取消事件的默认行为,例如阻止链接的默认跳转。

  1. capture 参数用于指定事件是否使用事件捕获模式,即事件从父元素向子元素传递。
element.addEventListener('click', function(event) {
  // capture: true 表示使用事件捕获模式
}, true);

当单击 element 元素时,事件处理程序会使用事件捕获模式,即事件从 element 的父元素向 element 的子元素传递, 无论先点击是子元素,还是父元素, 都是先执行父元素的事件, 即:先显示 hi, 再显示 what

<div id="app">
  <div v-on:click.capture="say('hi')">Say hi
    <div v-on:click="say('what')">Say what</div>
  </div>
</div>
  1. once 参数用于指定事件是否只执行一次。
element.addEventListener('click', function(event) {
  // once: true 表示事件只执行一次
}, { once: true });

当用户单击 element 元素时,事件处理程序会只执行一次,之后自动移除事件监听器。

  1. passive 参数用于指定事件处理程序是否是被动的,即不会调用preventDefault() 方法来阻止事件的默认行为,可以提高滚动性能。
element.addEventListener('touchmove', function(event) {
  // passive: true 表示事件处理程序是被动的,不会阻止事件的默认行为
}, { passive: true });

当用户在移动设备上触摸并滑动 element 元素时,事件处理程序会被指定为被动的,不会阻止默认的滚动行为,提高滚动性能。需要注意的是,只有touchstarttouchmovetouchend 事件才支持 passive 参数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容