事件代理日常总结

js是单线程的，添加事件的时候如果正好加载异步数据，dom节点很有可能没有加载上就已经进入了事件队列，导致dom无法添加事件

        var s = document.querySelector('body');
        var tem;
        s.addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() === 'button' &&  e.target.className.indexOf('cancel-order') >= 0) {
                $('#cancel-reason').val('');
                $('#cancel-content').val('');
                tem = $(e.target);
                var info = tem.parent().parent().find('.orderId').text();
                $('#info-order').text(info);
                $('.mask').show();
                $('.jump-layer').show();
            }
        });

以上是我用的事件代理，基本原理就是在父类元素添加事件，这样父类可以在加载前就进入事件队列，可以添加事件，添加事件后自行处理吧。。

同时使用事件代理不用为所有的子类添加事件，这样在有大量的子类时可以减少添加事件的消耗。

/**
 * @file Describe the file
 */
var olTpl = __inline('./selectSpot.tmpl');
module.exports = {
    init: function () {
        var self = this;
        self.$content = $('#content-list');
        $.get('main/gettouristplace', {city_id:2912}, function (data) {
            var data = JSON.parse(data);
            self.$content.append(olTpl(data));
            console.log($('input[type=checkbox]:checked').length);
            console.log($('label .check2').length);
        });
        var s = document.querySelector('body');
        var tem;
        s.addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() === 'i' && e.target.className.indexOf('check2') >= 0 && e.target.className.indexOf('iconfont') >= 0)
            {
                console.log(166);
                console.log($('input[type=checkbox]:checked').length);
                console.log($('input[type=checkbox]:checked')); 
                if ($('input[type=checkbox]:checked').length === 10) {
                    console.log(3435);
                    $('input[type=checkbox]').not("input:checked").attr('disabled', 'true');
                    console.log($('input[type=checkbox]').not("input:checked").length);
                }
            }
        });
    }
};