JavaScript 事件处理程序介绍

在 JavaScript 中，事件处理程序是处理在页面中发生的事件的功能代码。当用户在页面上进行操作时，比如单击一个按钮或是按下一个键盘按键，这些事件将被浏览器捕获，然后触发相应的事件处理程序。

事件处理程序的绑定方式

1. HTML事件处理程序

在HTML标签中直接在属性中绑定事件处理程序。

<button onclick="alert('Hello World!')">Click me!</button>

2. DOM0级事件处理程序

使用JavaScript代码为元素设置事件处理程序。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    alert("Hello World!");
}

3. DOM2级事件处理程序

使用JavaScript代码为元素添加事件监听器。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert("Hello World!");
}, false);

事件对象

在事件处理程序被调用时，浏览器会创建一个事件对象，这个事件对象包含了与事件相关的信息和功能。

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert("Clicked at X:" + event.clientX + " Y: " + event.clientY);
}

事件传播

当一个事件发生在页面上某个元素上时，它会按照特定的顺序向上或向下传播，这个过程被称为事件传播。

1. 事件捕获

事件从根节点开始向下传播，直到到达事件对象所在的元素。在这个过程中，先由外向里依次触发每一个父元素的事件处理程序。

2. 处理事件

到达事件对象所在的元素后，执行相应的事件处理程序。

3. 事件冒泡

事件从事件对象所在的元素开始向上冒泡，直到到达根元素。在这个过程中，先由里向外依次触发每一个父元素的事件处理程序。

var btn = document.getElementById("myBtn");
var div = document.getElementById("myDiv");
btn.onclick = function(event) {
    alert("Clicked button!");
}
div.onclick = function(event) {
    alert("Clicked div!");
}

点击按钮时，事件首先在按钮上被触发，然后依次冒泡到 div 元素。因此，先弹出"Clicked button!"，再弹出"Clicked div!"。

示例一

在示例中，为按钮绑定事件处理程序，单击按钮后，弹出提示框。

<!DOCTYPE html>
<html>
<head>
    <title>Event Demo</title>
</head>
<body>
    <button id="myBtn">Click me!</button>
    <script>
        var btn = document.getElementById("myBtn");
        btn.onclick = function() {
            alert("Hello World!");
        }
    </script>
</body>
</html>

示例二

在示例中，为页面绑定事件监听器，当页面滚动时，控制台输出当前滚动位置。

<!DOCTYPE html>
<html>
<head>
    <title>Event Demo</title>
</head>
<body>
    <div style="height: 2000px;"></div>
    <script>
        window.addEventListener("scroll", function(event) {
            console.log("Scroll position: " + window.scrollY);
        });
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript 事件处理程序介绍 - Python技术站