可以直接在html标签中添加事件
例如:
<div onclick="handleClick()">点击</div>
还可以为相关的节点元素添加一个特定的类名或id,以便于为该元素添加事件。可以通过on+事件名称为元素添加事件监听。
var element = document.getElementById('a'); element.onclick = handleClick; function handleClick(){};
通过这样的方式 给id为a 的标签添加上来点事件 handleClick()
取消事件
element.onclick = null;
2.addEventListener()
将指定的事件监听添加到元素上,当该事件上触发相应的事件时,会执行该事件监听函数。
var element = document.getElementById('a')
element.addEventListener("click", function () {//填写方法操作
})
可以通过这样的方式绑定事件
而且可以绑定不止一个事件
var element = document.getElementById('a')
element.addEventListener("click", function () {//填写方法操作1})
element.addEventListener("click", function () {//填写方法操作2})
element.addEventListener("click", function () {//填写方法操作3})
这样会执行方法 1 2 3
有三个可选参数
capture
once
passive
capture接收一个布尔值,表示handle会在该类型的事件捕获阶段传播到该EventTarget时触发,true表示事件在捕获阶段执行,false表示事件在冒泡阶段执行,默认为false。
once接收一个布尔值,表示handle是否最多只调用一次,如果是true,handle会在其被调用之后自动移除,为false时则在其被调用之后不会移除,默认为false。
passive接收一个布尔值,表示handle是否忽略掉preventDefault(),默认为false,表示不忽略。如果为true,handle仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
element.addEventListener("click", function () {//方法具体内容
}, { once: false })
3.removeEventListener()
来删除使用addEventListener()方法添加的事件监听。
如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次,一共两次,这两次事件需要分别移除,两者不会互相影响。移除一次 并没有完全移除。