事件委託

時間 2019-11-13

標籤事件委託简体版

原文原文鏈接

事件委託：利用冒泡的原理，把事件加到父級上，觸發執行效果html

好處：1.提升性能 2.新添加的元素還會有以前的事件node

event對象：事件源：無論在哪一個事件中，只要你操做的那個元素就是事件源瀏覽器

兼容問題：ie：window.event.srcElement 標準：event.targetapp

nodeName:此方法用來找到當前元素的標籤名大寫性能

例子：ul下面包含幾個li 在鼠標移入li中觸發事件同時，點擊add按鈕以後添加的li也能擁有此事件。this

一般的作法是spa

            for(var i= 0;i<aLi.length;i++){
              aLi[i].onmouseover = function(){
                  this.style.background = 'red';
              };
              aLi[i].onmouseout = function(){
                    this.style.background = '';
              };
            }

　可是當此li數量過多時，則會帶來性能的影響code

因此將li的事件委託給父級ul上htm

完整代碼以下：對象

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var oInput = document.getElementById('input1');
            var iNow = 4;
            oInput.onclick = function(){    //add按鈕點擊時添加li功能
                iNow++;
                var oLi = document.createElement('li');
                oLi.innerHTML = 1111 *iNow;
                oUl.appendChild (oLi);
            };

            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                //爲了兼容性，ie爲window.event.srcElement,標準瀏覽器爲event.target
                var target = ev.target || ev.srcElement;
                //判斷nodeName。若是是li就執行，這樣能夠避免ul也執行事件。獲取到的標籤是大寫的li。
                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 = '';
                }
            }
        };
    </script>
</head>
<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" value="add" id="input1" /> 
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。