jquery绑定事件以及js绑定事件

Posted 2020-10-30 always_strive

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);
});

这些我只是写了给元素添加事件以及阻止冒泡的方法，后续如果有添加，会添加。如果有问题，麻烦指出。