在 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 参数。
网友评论