当我们需要对网页中的某些元素进行交互操作时，Javascript 中常用的方法是事件绑定。下面是学习 Javascript 事件绑定时需要掌握的要点：
事件绑定(Event binding) 是指为特定的事件类型和元素绑定一个事件处理器，当特定事件在特定元素上发生时，事件处理器会被自动调用。
Javascript 中两个主要的事件绑定方法：
使用 .onclick 、.onload等直接将事件处理器赋值给元素属性的方式，例如：
let btn = document.getElementById('btn');
btn.onclick = function(){
alert('Hello World!');
};
使用 addEventListener() 方法动态地为元素添加事件处理器，例如：
let btn2 = document.getElementById('btn2');
btn2.addEventListener('click', function(){
alert('Hello World!');
});
DOM2级事件绑定还有一些高级应用，例如参数传递、事件流控制以及事件的删除等。
使用事件绑定时需要注意以下几点：
在往元素上绑定事件处理器之前，需要确保该元素已经加载完毕。可以使用 window.onload 事件或者 DOMContentLoaded 事件来等待文档加载完毕之后再进行操作。
window.onload = function() {
// DOM内容加载完毕后执行的代码
};
document.addEventListener("DOMContentLoaded", function() {
// DOM内容加载完毕后执行的代码
});
无论使用哪种方法，都需要避免重复绑定事件处理器，否则会导致事件处理器执行多次。可以使用 removeEventListener() 方法来删除已绑定的事件处理器。
事件委托(Event Delegation)是指利用事件冒泡机制，将事件处理器绑定到父元素上，通过判断事件源是否匹配需要操作的元素进行操作。
以下是两个使用事件绑定的示例：
<body>
<button id="btn">Click me</button>
<script>
let btn = document.getElementById('btn');
function showMessage() {
alert('Hello World!');
}
btn.addEventListener('click', showMessage);
</script>
</body>
<body>
<div id="box">Hover me</div>
<script>
let box = document.getElementById('box');
function changeColor(event) {
event.target.style.color = 'red';
}
box.addEventListener('mouseenter', changeColor);
box.addEventListener('mouseleave', function(event) {
event.target.style.color = 'black';
});
</script>
</body>
以上就是 Javascript 事件绑定学习要点的完整攻略。
本文链接：http://task.lmcjl.com/news/9817.html