Javascript-事件委托

很简单的介绍一下事件委托:

1.概念:对"事件处理程序过多"问题的解决方案就是事件委托。

2.原理:事件委托利用率 事件冒泡,只指定一个事件处理程序来管理某一类型的事件处理程序,例如(onclick,mousedown,mouseup,keydown,keyup,keypress);

    其mousemove||mouseout是需要处理鼠标的移动距离与元素的位置所以不建议使用。

3。简单实例:

<body>
        <ul id="dad">
            <li id="brother">brother</li>
            <li id="sister">sister</li>
            <li id="pet">pet</li>
        </ul>
    </body>
    <script type="text/javascript">
        var dad = document.getElementById('dad');
        dad.onclick = function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            switch(target.id){
                case 'brother':
                    alert(target.innerHTML);
                    break;
                case 'sister':
                    alert(target.innerHTML);
                    break;
                case 'pet':
                    alert(target.innerHTML);
                    break;
            }
        }
    </script>

 

 4.移除事件处理程序:当不需要事件处理程序的时候,我们就应当把事件处理程序移除掉。

  

<div class="btnWrap">
            <button type="button" value="click me" class="innerbtn"></button>
        </div>
var btnWrap = document.getElementsByClassName('innerbtn');
        btnWrap.onclick = function(){
            btnWrap.onclick = null;
            document.getElementsByClassName('btnWrap').innerHTML = 'processing...';
        }

 

posted @ 2017-04-06 15:43  麻吉岛子  阅读(127)  评论(0编辑  收藏  举报