Javascript之事件监听
S之事件监听
事件监听是JavaScript中的一种功能，可以对页面中的特定元素进行监视，然后在特定的用户操作（例如点击按钮，提交表单等）发生时触发特定的代码。
一、事件监听的两种模式
在浏览器中，事件监听处理有两种模式，一种是事件冒泡，另一种是事件捕获。
事件冒泡（bubbling）：当一个元素接收到事件的时候，会把它接收到的事件传给它的父元素，然后再传给父元素的父元素，一直传递到最顶层的 Document 对象。这种事件处理方式就是事件冒泡。大多数事件都会冒泡。简单来说，如果你点击了一个按钮，那么你不仅仅只是点击了按钮，同时也点击了包含这个按钮的所有父元素。
事件捕获（capturing）：事件捕获与事件冒泡恰好相反，事件会从最外层元素先接收，然后向内层嵌套的元素传递，最后达到最精确的元素。
二、事件监听函数
在JavaScript中，常用的事件监听函数是addEventListener。这个函数可以接受三个参数
·第一个是想监听的事件名称（例如"click"，"mouseover"等）
·第二个是当事件发生时想运行的函数。
·第三个是可选参数，用于指定事件是否在捕获或冒泡阶段处理
例子：
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">点击我</button>
<script>//js语法
document.getElementById("myBtn").addEventListener("click", function(){
alert("按钮被点击了！");
});
</script>
</body>
</html>在这个例子中，我们监听id为"myBtn"的按钮，当用户点击按钮时，浏览器会弹出一个警告框。
document.getElementById("myBtn")：这个方法获取了DOM树中ID为"myBtn"的元素。这个元素可能是任何类型的HTML元素，只要它的ID是"myBtn"即可。addEventListener("click", function())：这是一个事件监听器，它告诉浏览器：当用户点击id为"myBtn"的元素时，我希望你执行后面那个函数。function() {alert("按钮被点击了！");}：这是被注册到点击事件的回调函数。当用户点击id为"myBtn"的元素时，这个函数就会被执行。在这个函数里，我们让浏览器弹出一个警告框，显示"按钮被点击了！"。
三、所谓第三个可选参数
addEventListener方法还有第三个可选参数，用于指定事件是否在捕获或冒泡阶段处理。
默认的情况下，addEventListener 使用事件冒泡方式，也就是如果没有提供第三个参数，或者提供的值为 false，那么就采用事件冒泡方式处理。如果你想让事件以捕获方式触发，你可以提供第三个参数为 true。
// 使用事件捕获
document.getElementById("myBtn").addEventListener("click", function(){
alert("按钮被点击了！");
}, true);在实际编程中，与其设置捕获模式，我们更多的是在冒泡阶段处理事件。这样可以最大限度地保证我们代码的兼容性，因为并非所有的事件都支持冒泡，但是更少的事件支持捕获。
四、添加多个事件监听器
需要注意的是，可以为一个元素添加多个事件监听器，甚至可以为同一个事件添加多个监听器，当事件发生时，监听器会按照它们被添加的顺序执行。
为一个元素添加多个不同的事件监听器：
var btn = document.getElementById('myBtn');
// 修改页面标题
btn.addEventListener('click', function(){
document.title = '你点击了按钮！';
});
// 修改元素背景颜色
btn.addEventListener('mouseover', function(){
this.style.backgroundColor = 'red';
});
// 还原元素背景颜色
btn.addEventListener('mouseout', function(){
this.style.backgroundColor = '';
});在这个例子中，我们为同一个按钮元素添加了三个事件监听器：
对于点击事件（click），我们将页面的标题修改为“你点击了按钮！”；
对于鼠标移上去的事件（mouseover），我们将按钮的背景色改为红色；
对于鼠标移出去的事件（mouseout），我们将按钮的背景色还原。
同一类型的事件添加多个处理函数：
var btn = document.getElementById('myBtn');
// 显示第一个事件处理消息
btn.addEventListener('click', function(){
console.log('这是第一个点击事件处理函数');
});
// 显示第二个事件处理消息
btn.addEventListener('click', function(){
console.log('这是第二个点击事件处理函数');
});在这个例子中，我们为同一个点击事件（click）绑定了两个处理函数。当点击这个按钮时，将会依次在控制台打印出“这是第一个点击事件处理函数”和“这是第二个点击事件处理函数”两个消息。
这是因为当一个元素的同一事件类型被多次绑定事件处理函数时，这些函数将按照添加的顺序依次执行。
注意：在 JavaScript 中，addEventListener 方法只能同时为一个特定事件添加一个监听器
如果你想为一个元素的两个事件（例如 'click' 和 'mouseover'）都添加同一个监听器函数，你需要分别调用 addEventListener 方法，就像下面这样：
var btn = document.getElementById('myBtn');
var handler = function(){
text.innerText = '文本已发生改变';
}//设置一个名为handler的函数，能够改变文本内容
btn.addEventListener('click', handler);//当事件发生时，调用handler函数
btn.addEventListener('mouseover', handler)
