JS 事件机制

事件绑定
js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为 简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制 比如我们点击一个按钮，弹出对话框。

事件绑定有三种常见形式
1. 在 HTML 标签中指定

<input type="button" value="click me" οnclick="hello()">
<script>
function hello(){
   alert("hello world!");
}
</script>

2. 在 JavaScript 中指定

<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

3. 通过 addEventListener()  例如对dom操作

 div.addEventListener("click",function(){console.log("div click");},true);

事件冒泡
事件冒泡是js中的一种事件传播机制，当一个元素上触发了某个事件时，这个事件会在该元素上被处理，并且随着时间的推移，逐级传递给它的父元素，一直传递到文档的根元素，这种传播过程就被称为事件冒泡。例如，如果在一个div中有一个span，并且你点击了这个span，那么这个click事件会先在span上被触发，然后在div上被触发，最后在整个document对象上被触发。
事件冒泡机制的优点是它允许更简单和灵活的事件处理。通过将事件处理程序放在父元素上，可以在不改变子元素代码的情况下，处理多个子元素的相似事件。这避免了为每个子元素都设置事件处理程序的繁琐操作。
在某些情况下，我们可能希望阻止事件冒泡，以确保事件只在特定元素上被处理。这可以通过调用`event.stopPropagation()`方法或`event.cancelBubble = true`(在旧版本的IE中)来实现。这样做可以防止事件传播给父元素。
总结一句话
事件冒泡是由内到外的，它是从目标节点开始，沿父节点依次向上，并触发父节点上的事件，直至文档根节点，就像水底的气泡一样，会一直向上。

事件捕获
事件捕获是由外到内的（与事件冒泡正好相反）。在事件捕获阶段，事件会从 DOM 树的最外层开始，依次经过目标节点的各个父节点，并触发父节点上的事件，直至到达事件的目标节点。

事件委托
事件委托也叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托就是利用事件冒泡机制实现的。
例如一个ul 标签下面有很多li标签，每个li标签都需要加一个事件处理相应，那么我们就可以利用事件委托来处理父级ul标签来替代处理所有li标签。
主要作用：
1.提高性能
2.动态监听：可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以具有和其它元素一样的事件。

事件回调
当触发该事件时，相应的函数将被自动调用并执行。

// HTML部分
<button id="myButton">Click me</button>
 
// JavaScript部分
const button = document.getElementById('myButton'); // 获取按钮元素
 
function handleClick() {
    console.log("Button clicked!"); // 在控制台输出提示信息
}
 
button.addEventListener('click', handleClick); 

上述代码中，我们首先通过document.getElementById()方法获取到id为"myButton"的按钮元素，然后定义了名为handleClick的函数作为点击事件的回调函数。最后，通过addEventListener()方法将这个回调函数与按钮的'click'事件关联起来。

当用户点击按钮时，会触发'click'事件，从而导致handleClick函数被调用，进而在控制台打印出"Button clicked!"的消息。