js事件监听,捕获及冒泡
一，监听相关：
1.绑定HTML元素属性：
<input type="button" value="clickMe" onclick="check(this)">
2.绑定DOM
document.getElementById("xxx").onclick
3.IE中的监听方法：
[object].attachEvent("事件类型","处理函数");//添加监听
[object].detachEvent("事件类型","处理函数");//取消监听
如：
window.onload=function(){//当整个HTML文档加载好之后就会触发onload事件
document.getElementById("test1").attachEvent("onclick",show);//给第一个按钮注册了onclick事件
document.getElementById("test2").onclick=function(){//解除第一个按钮的onclick事件
document.getElementById("test1").detachEvent("onclick",show);
}
};
4.标准DOM中的事件监听方法：
[object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");
[object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");
addEventListener()方法特点：
-
element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
-
addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。
-
addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。
-
注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法。下面三会有介绍。
-
可以使用 removeEventListener() 来移除之前绑定过的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM事件监听</title>
</head>
<body>
<input type="button" id="test1" value="测试1">
<button type="button" id="test2"><b>测试2</b></button>
<script type="text/javascript">
function show(){
alert("hello");
}
window.onload=function(){
var test1=document.getElementById("test1");
var test2=document.getElementById("test2");
test1.addEventListener("click", show, false);//给第一个按钮注册了onclick事件
/*test2.onclick=function(){//解除第一个按钮的onclick事件(方法一)
test1.removeEventListener("click", show, false);
}*/
test2.addEventListener("click", function(){//解除第一个按钮的onclick事件(方法二)
test1.removeEventListener("click", show, false);
}, false);
}
</script>
</body>
</html>
参考：https://www.jianshu.com/p/2c2d0b8f210f
二，工具集：
// event(事件)工具集，来源：github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type,