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技术站