jQuery事件绑定和处理

Question

我已经看过很多像这样的jQuery代码,不用说我不喜欢它:

<div id="myDiv">
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
</div>

<script>
    $(document).ready(function(){
        $('clickable').click(function(){
            // Do some stuff...
        });
    });
</script>

我认识的人都在做这个,因为上述事件绑定和处理需要的HTML结构,可在页面上,但它会导致混合表现,逻辑和配置遍布网站的意见.此外,它几乎使用任何调试器来调试逻辑非常困难.

所以,我已经开始在这个单独的.js文件中编写代码(在这里小提琴):

// BEGIN: Event Handlers
    var onLoad = function(){
        $('.clickable').data('clicked', false);
    };
    var onMyDivClick = function(){
        var clicked = $(this).data('clicked');
        if (clicked) {
            $(this).trigger('myCustomEvent');
        } else {
            alert('you clicked me');
            $(this).data('clicked', true);
        }
    };
    var onMyCustomEvent = function(){
        $(this).css('color', 'dimGray');
        alert('please don\'t click me again');
    };
// END: Event Handlers

// BEGIN: Event Binding
    $(window).on('load', onLoad);
    $(document).on('click', '.clickable', onMyDivClick);
    $(document).on('myCustomEvent', '.clickable', onMyCustomEvent);
// END: Event Binding

现在,我不需要关心页面上的结构.我不需要将所有内容包装在内部$(document).ready(function(){});我不需要关心结构是否将加载ajax.

问题1 该方法有任何缺点吗？到目前为止,我还没有找到任何.但在重构​​我们网站上的大部分代码之前,我想听听可能的警告.

问题2 如何使用最新的jQuery功能进一步采用这种方法？

Answer 1

我知道这种方法有一个缺点。它写在中的事件性能 部分.on()。

在文档树顶部附近附加许多委派事件处理程序可能会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委派事件附加到尽可能靠近目标元素的文档位置。避免过度使用document或document.body来处理大型文档上的委托事件。

因此，将所有事件绑定到 后document，它的性能会更差。

在附加说明中，有些东西不能使用此方法，例如load、scroll、 和error。