• 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...';
            }
  • 相关阅读:
    sdibt 1251 进化树问题
    hdu 2014 位运算
    poj 3254 状态压缩dp
    hdu 5040bfs+优先队列 需要存状态
    zoj 3812 状压dp
    C++标准库:bitset 用法整理&&zoj 3812
    BZOJ 2572 高速公路
    BZOJ 1036 树的统计
    BZOJ 1035 Risk
    BZOJ 1034 泡泡堂
  • 原文地址:https://www.cnblogs.com/majidaozi/p/6673777.html
Copyright © 2020-2023  润新知