标签：添加 默认 fun dev bind art 代码 文件 UNC
jquery绑定事件:
<div id="click1">bind事件</div><!--如果有动态元素，不能触发-->
<div id="click2">one</div><!--只能点击一次-->
<div id="click3">live</div><!--已经弃用-->
<div id="click4">
<div class="click4Child">delegate</div>
</div>
<div id="click5">
<div class="click5Child">on</div>
</div>
对应的代码：
//jquery绑定click事件的写法start
$("#click1").bind("click",function() {
alert("bind事件");
});
$("#click2").one("click",function() {
alert("one事件");
});
/*$("#click3").live("click",function() {
alert("live");
});*/
$("#click4").delegate(".click4Child","click",function() {
alert("delegate");
});
$("#click5").on("click",".click5Child",function() {
alert("on");
});
js绑定事件：
<div id="click6">addEventListener</div>
<div id="click7">click7</div>
<div id="click8" onclick="click8()">click8</div>
<div id="click9">
<div class="click9Child1">child1
<div class="click9Child2">child2
<div class="click9Child3">clild3</div>
</div>
</div>
</div>
<div id="click10">
<div class="click10Child1">child1
<div class="click10Child2">child2</div>
</div>
</div>
对应的代码：
//js事件绑定写法
document.getElementById("click6").addEventListener("click",function() {
alert("addEventListener");
});//最后一个参数默认是false,表示冒泡;为true表示捕获
document.getElementById("click7").onclick = function() {
alert(1);
}
function click8() {
alert("click8");
}
var click9 = document.getElementById("click9");
var click9Child1 = document.getElementsByClassName("click9Child1")[0];
var click9Child2 = document.getElementsByClassName("click9Child2")[0];
var click9Child3 = document.getElementsByClassName("click9Child3")[0];
click9Child1.addEventListener("click",function() {
alert(1);
});
click9Child2.addEventListener("click",function() {
alert(2);
},true);
click9Child3.addEventListener("click",function(event) {
alert(3);
//event.stopPropagation();//阻止冒泡
});
// 在做上述问题的时候，如果要点击child3时，出现的顺序是2,3,1.为什么呢？child1表示的是冒泡，child2表示的是捕获，child3表示的是冒泡。
// 要点击child3,先看它父级的父级,从上到下的顺序是(child1,child2,child3)，因为不管什么时候先执行捕获然后执行冒泡，所以结果排出来的顺序是(child2,child3,child1)。
// 如果要点击child2，同样先看父级的父级,从上到下的顺序是(child1,child2),所以结果排出来的顺序是(2,1)
//IE8以下不支持以上写法
//下面我们来看支持IE的绑定事件的写法
var click10 = document.getElementById("click10");
var click10Child1 = document.getElementsByClassName("click10Child1")[0];
var click10Child2 = document.getElementsByClassName("click10Child2")[0];
click10.attachEvent("onclick",function() {
alert("click10");
});
click10Child1.attachEvent("onclick",function() {
alert("click10Child1");
});
click10Child2.attachEvent("onclick",function(event) {
alert("click10Child2");
event.cancelBubble = true; //阻止冒泡
});
下面来一个兼容所有浏览器的事件绑定的写法
<!--兼容所有浏览器-->
<div id="click11">
<div class="click11Child1">child1
<div class="click11Child2">child2</div>
</div>
</div>
在写代码之前引用一个公共文件EventUtil.js,文件如下：
var EventUtil = {
addHandler: function(element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type,handler);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on" + type] = handler;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
var click11 = document.getElementById("click11");
var click11Child1 = document.getElementsByClassName("click11Child1")[0];
var click11Child2 =document.getElementsByClassName("click11Child2")[0];
EventUtil.addHandler(click11,"click",function() {
alert("click11");
});
EventUtil.addHandler(click11Child1,"click",function() {
alert("click11Child1");
});
EventUtil.addHandler(click11Child2,"click",function(event) {
alert("click11Child2");
EventUtil.stopPropagation(event);
});
这些我只是写了给元素添加事件以及阻止冒泡的方法，后续如果有添加，会添加。如果有问题，麻烦指出。
标签：添加 默认 fun dev bind art 代码 文件 UNC
原文地址：https://www.cnblogs.com/xingzoudecd/p/8746190.html
