event

2023-04-10 本文已影响0人 malgee

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

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

event.target：获取事件的目标元素，即事件最初发生的元素。
event.type：获取事件的类型，例如 "click"、"keydown" 等。
event.clientX 和 event.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() 和 capture、once、passive 等参数来控制事件的行为。

stopPropagation() 方法用于阻止事件冒泡，即阻止事件从子元素向父元素传递。

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

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

preventDefault() 方法用于取消事件的默认行为，例如阻止链接的默认跳转、表单的默认提交等。

element.addEventListener('click', function(event) {
  event.preventDefault();
});

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

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>

once 参数用于指定事件是否只执行一次。

element.addEventListener('click', function(event) {
  // once: true 表示事件只执行一次
}, { once: true });

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

passive 参数用于指定事件处理程序是否是被动的，即不会调用preventDefault() 方法来阻止事件的默认行为，可以提高滚动性能。

element.addEventListener('touchmove', function(event) {
  // passive: true 表示事件处理程序是被动的，不会阻止事件的默认行为
}, { passive: true });

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

event

猜你喜欢

热点阅读