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);
???????});
这些我只是写了给元素添加事件以及阻止冒泡的方法，后续如果有添加，会添加。如果有问题，麻烦指出。
jquery绑定事件以及js绑定事件
原文地址：https://www.cnblogs.com/xingzoudecd/p/8746190.html