一、onclick:
1.onclick添加事件:
语法:
element.onclick = function (){};
实例如下:
<body>
<div class="box">
<div id="box1"">点我</div>
</div>
</body>
<script>
var box1 = document.getElementById("box1");
box1.onclick = function(){
console.log("我是第一个");
}
box1.onclick = function(){
console.log("我是第二个");
}
</script>
结果:
以上结果显示,点了6次“点我” , 其结果都是“我是第二个”,不会出现我是第一个。
由此我们可知:一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次,但是仍然只会出现最后的一次绑定。
2.onclick删除事件:
语法:
element.onclick = null;
二、addEventlistener:
1.addEventlistener添加事件监听器:
语法:
element.addEventListener(事件名,处理函数,布尔值);
实例如下:
<body>
<div class="box">
<div id="box1">点我</div>
</div>
</body>
<script>
var box1 = document.getElementById("box1");
box1.addEventListener ("click",function(){
console.log("我是第一个");
},false);
box1.addEventListener ("click",function(){
console.log("我是第二个");
},false);
</script>
结果:
两次绑定的事件,都能够成功运行,也就是点击一次,两个结果都会打印。
由此我们可知:对于一个可以绑定的事件对象,想多次绑定事件都能运行,选用addEventListener.
注意:addEventlistener事件名不带on,处理函数为函数引用,布尔值代表冒泡(内到外)或捕获(外到内)。
2.当布尔值为false时,代表事件冒泡:
element.addEventListener(“click”,function(){},false);
3.当布尔值为true时,代表事件捕获:
element.addEventListener(“click”,function(){},true);
4.移除事件监听器:
removeEventListener(事件名,处理函数);
// IE8及以下的事件监听器, 注意:事件名带o:
attachEvent(事件名,处理函数);
detachEvent(事件名,处理函数);
示例如下:
var btn = document.getElementById("myBtn");
//所有主流浏览器,除了 IE 8 及更早 IE版本
if (btn .addEventListener) {
btn .addEventListener("click", myFunction);
// IE 8 及更早 IE 版本
} else if (btn .attachEvent) {
btn .attachEvent("onclick", myFunction);
}
通过addEventListener添加的事件必须通过相对应的为removeListener注销事件。但是如果像上面的用匿名函数的方式注册的事件,不能使用removeListener注销,因为没用对应事件的引用。
所以注册事件如果需要取消,最好使用一个引用,即:
var eveName= function () {
// ...
};
注意:这种方式,对于一个对象多次绑定同样的eveName,那么不会重复执行,只会执行一次。对于上面的匿名函数,就算内容一样,也会依次执行,因为并不能算是相同事件处理器;
里面的this引用,不是window对象,而是触发事件的元素的引用。
5.补充-----阻止事件冒泡及事件委托的封装函数:
①阻止事件冒泡
function stopBubble(eve){
if(event.stopPropagation){
eve.stopPropagation();
}else{
eve.cancelBubble=true;
}
}
②事件委托:
function eveEnt(child,cb){
return function(eve){
let e = eve || window.eveEnt;
let targetEle = e.target || e.srcElement;
for(let i=0;i<child.length;i++){
if(child[i] == targetEle){
cb.call(targetEle)();
}
}
}
}
总结:
1.onclick 只能给元素注册一个事件,如果存在多个,则后面的事件会覆盖前面的事件;
2.addEventListener允许给一个事件注册多个listener监听器,添加的事件不会覆盖已存在的事件;
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML;
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除;
5.IE8及以下、Opera 7.0 及 Opera 更早版本可以使用attachEvent(事件名,处理函数)和detachEvent(事件名,处理函数),注意:事件名带on。