目录
我们知道JavaScript添加事件的方式有三种:
1.直接添加
<button οnclick="do_Click()">点击事件</button>
2.用document为对象赋值的方式
document.getElementById("box").οnclick=function(){
console.log(123);
}
3.addEventsListener方式
document.getElementById("box").addEventListener('click',function(){
},false)
addEventsListener比前面两种有什么优势呢?
1. addEventsListener 可以在文档中添加许多事件,添加的事件不会覆盖已存在的事件;而前面两种方式一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
document.addEventListener("click", myFunction2);
document.addEventListener("click", myFunction2);
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
document.addEventListener("blur", myFunction3);
2.该方法同时支持事件处理的捕获和冒泡阶段,可以指定第3个参数来设置:默认是false (冒泡),可以设置 true (捕获)。
语法:
document.addEventListener(event, function, useCapture)
说明:
event | 必需。描述事件名称的字符串。 注意: 不要使用 "on" 前缀。比如用 "click" 来取代 "onclick"。 |
function | 必需。描述了事件触发后执行的函数。 |
useCapture | 可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。 true :事件在捕获阶段执行 false::默认。事件在冒泡阶段执行 |
如果浏览器不支持 addEventListener方法, 你可以使用 attachEvent() 方法替代
下面看实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<div id="clickDiv" style="height:100px;width:100px;background:green;"></div>
<button id="install">事件挂载</button>
<button id="uninstall">事件卸载</button>
<button id="install2">事件挂载多个</button>
<button id="uninstall1">事件卸载1</button>
<button id="uninstall2">事件卸载2</button>
<button id="uninstall12">事件卸载1和2</button>
</body>
<script>
/**
* DOM 事件挂载
* el DOM元素
* eventName 事件名
* listener 监听函数
* capture 是否是捕获阶段
*/
function install(el, eventName, listener, capture) {
if (el.addEventListener) {
el.addEventListener(eventName, listener, capture);
}else {
el.attachEvent('on' + eventName, listener);
}
}
/**
* DOM 事件卸载
* el DOM元素
* eventName 事件名
* listener 监听函数
* capture 是否是捕获阶段
*/
function uninstall(el, eventName, listener, capture) {
if (el.removeEventListener) {
el.removeEventListener(eventName, listener, capture);
}else {
el.detachEvent('on' + eventName, listener);
}
}
(function(){
var clickDiv = document.getElementById("clickDiv");
var installButton = document.getElementById("install");
var uninstallButton = document.getElementById("uninstall");
installButton.onclick=function(){
install(clickDiv, 'click', divClick, false);
}
uninstallButton.onclick=function(){
uninstall(clickDiv, 'click', divClick, false);
}
function divClick(){
console.log('divClick');
}
var install2Button = document.getElementById("install2");
install2Button.onclick=function(){
install(clickDiv, 'click', divClick1, false);
install(clickDiv, 'click', divClick2, false);
}
function divClick1(){
console.log('divClick1');
}
function divClick2(){
console.log('divClick2');
}
var uninstall1Button = document.getElementById("uninstall1");
var uninstall2Button = document.getElementById("uninstall2");
var uninstall12Button = document.getElementById("uninstall12");
uninstall1Button.onclick=function(){
uninstall(clickDiv, 'click', divClick1, false);
}
uninstall2Button.onclick=function(){
uninstall(clickDiv, 'click', divClick2, false);
}
uninstall12Button.onclick=function(){
uninstall(clickDiv, 'click', divClick1, false);
uninstall(clickDiv, 'click', divClick2, false);
}
})()
</script>
</html>
效果图: