由点击页面其它地方隐藏div所想到的jQuery的delegate

2020-05-22 15:46:16易采站长站整理

这时候就是思路二展示身手的时候了,我们看看思路二在这种时候代码的书写



<script type=”text/javascript”>
            $(document).bind(‘click’,function(e){
                var e = e || window.event;
                var elem = e.target || e.srcElement;
                while (elem) {
                    if (elem.className && elem.className.indexOf(‘dialog’)>-1) {
                        return;
                    }
                    elem = elem.parentNode;
                }


                $(‘#test’).css(‘display’,’none’);
            });
        </script>


改动也相当的小,我们来看看是不是能解决上边的两个问题了,首先无论多少个dialog我们只是绑定了一个click事件处理程序,对性能影响不大,添加一个新的dialog思路二的代码还好不好使呢,依旧好使,这样我们就能发现在复杂页面的情况下实际上思路二是一种更优秀的解决方案。


这些都明白了,我们就能说说本文的第二个主角jQuery的delegate方法了。


delegate
首先看看jQuery官方对delegate的语法及描述


.delegate( selector, eventType, handler(eventObject) )


Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.


delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。


使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。



$( “table” ).delegate( “td”, “click”, function() {
      $( this ).toggleClass( “chosen” );
    });


    通过上面语句我们就可以为所有table的td绑定click事件处理程序。