事件绑定
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!"的消息。