我的jQuery第六天 trigger的一些原理 and hover

jQuery方法 trigger()

• 主动的去触发一些事件,可以去触发系统的一些事件
• 自定义事件

<div class="demo">

    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
      $('.demo').on('click', function(e , a, b, c, d){
            console.log('click', a, b, c, d)
        })
        //普通触发事件
       $('.demo').on('pageLoad', function(e, a, b, c, d){
            console.log(a, b, c, d);
        })
        $('.demo').trigger('pageLoad',[10, 20, 30, 40]);
    </script>

` trigger事件的原理

 jQuery.prototype.myOn = function(type, handle){
        for(var i = 0; i < this.length; i ++){
            if(!this[i].cacheEvent){
                this[i].cacheEvent = {};
            }
            if(!this[i].cacheEvent[type]){
                this[i].cacheEvent[type] = [handle];
            }else{
                this[i].cacheEvent[type].push(handle);
            }
        }
    }

    jQuery.prototype.myTrigger = function (type){
        var params = arguments.length > 1 ? [].slice.call(arguments , 1) : [];
        var self = this;
        for (var i = 0; i < this.length; i ++){
            if(this[i].cacheEvent[type]){
                this[i].cacheEvent[type].forEach(function(ele, index){
                    ele.apply(self, params)
                });
            }
        }
    }

hover()

• 相当于

$('dome').on('mouseenter', function(){
    console.log('enter');
}).on('mouseleave', function()){
    console.log('leave');
}
$('dome').houver(function(){
    console.log('enter');
},function(){
    console.log('leave');
})