對js事件委託的瞭解

weixin_34148340發表於2018-07-30
JS事件

事件委託，顧名思義就是本事應該發生在a身上的事件，委託給b來執行。使用該技術能讓你避免對特定的每個節點新增事件監聽器；相反，事件監聽器被新增在他們的父元素上，事件監聽器會分析從子元素上冒泡上來的事件，並找到是哪個子元素事件。

通俗來講： 事件有：onclick、onmouseover、onmouseout等等；委託呢，就是讓別人來做，這件事情本身是加在元素上，然而你卻載入別人身上來做，完成事件；

原理：
利用冒泡原理，將事件加在父級上觸發，執行效果；

好處：
提高效能
新新增元素，可以直接擁有事件；

使用情景：
為DOM中的很多元素繫結相同事件；
為DOM中尚不存在的元素繫結事件；

js一般寫法：
  window.onload = function(){
     var oUl = document.getElementById('ul');
     var aLi = oUl.getElementsByTagName('li');
     for(var i=0; i<aLi.length; i++){
         aLi[i].onmouseover = function(){
             this.style.background = 'red';
         }
         aLi[i].onmouseout = function(){
             this.style.background = '#fff';
         }
     }
  }
事件委託的js寫法：
window.onload = function(){
    var oUl = document.getElementById('ul');
    var aLi = oUl.getElementsByTagName('li');  
    /*這裡用到事件源：event物件， 事件源，不管在哪個事件中，只要你操作的那個元素就是事件源
               ie： window.event.srcElent
            標準下： event.target
         nodeName: 找到元素的標籤名；
     */
    oUl.onmouseover = function(ev) {
        var ev = ev||window.event;
        var target = ev.target || ev.srcElement;       
        if(target.nodeName.toLowerCase() == "li"){
           target.style.background = 'red';
        }
    }
    oUl.onmouseout = function(ev) {
        var ev = ev || window.event;
        var target = ev.target|| ev.srcElement;
       
        if(target.nodeName.toLowerCase() == 'li'){
           target.style.background = ' #fff';
        }
    }
}
事件委託的jq寫法
$(function(){
    $("#ul").on('click','li',function(){
        if(!$(this).attr('s')){
            $(this).css('background','red');
            $(this).attr('s',true);
        }else{
            $(this).css('background','#fff');
            $(this).removeAttr('s');
        }
    })
})
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
    <ul id="ul">
        <li>這是第一個</li>
        <li>這是第二個</li>
        <li>這是第三個</li>
    </ul>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul');
            var aLi = oUl.getElementsByTagName('li');  
            /*這裡用到事件源：event物件， 事件源，不管在哪個事件中，只要你操作的那個元素就是事件源
                       ie： window.event.srcElent
                    標準下： event.target
                 nodeName: 找到元素的標籤名；
             */
            oUl.onmouseover = function(ev) {
                var ev = ev||window.event;
                var target = ev.target || ev.srcElement;
               
                 console.log(ev);
                 console.log(this);
               
                if(target.nodeName.toLowerCase() == "li"){
                   target.style.background = 'red';
                }
            }
            oUl.onmouseout = function(ev) {
                var ev = ev || window.event;
                var target = ev.target|| ev.srcElement;
               
                if(target.nodeName.toLowerCase() == 'li'){
                   target.style.background = '#fff';
                }
            }
        }
    </script>
</body>
</html>

文章由https://www.cnblogs.com/yc8930143/p/7270003.html更改而來，尊重作者的辛苦，在此說明

相關文章