jQuery学习笔记——事件添加的特性以及方法

同一元素相同的后续事件不会覆盖前面的事件

    //原生js中,相同元素注册相同的事件,后续的事件会把前面的事件覆盖掉
    document.getElementById('box').onclick = function(){
        console.log('js事件1')
    }
    document.getElementById('box').onclick = function(){
        console.log('js事件2')
    }

    //在jQuery中,相同元素注册相同的事件,后面的事件不会把前面的事件覆盖
    $('#box').click(function(){
        console.log('jQuery事件1')
    })
    $('#box').click(function(){
        console.log('jQuery事件2')
    })

事件绑定与解绑

简单绑定,这里把div都绑定了点击事件,但是后续添加的div不会绑定这个事件

    $('div').click(function(){
        console.log('1')
    })

用bind方法可以同时注册多个事件,但是也不能动态绑定

   $('div').bind({
       mouseenter:function(){
           console.log('鼠标移入事件')
       },
       click:function(){
           console.log('鼠标点击事件')
       }
   })

delegate方法，注册委托事件,原理是事件冒泡.支持同时注册,也支持动态注册

    $('body').delegate('div',{
        mouseenter:function(){
            console.log('鼠标移入事件')
        },
        click:function(){
            console.log('鼠标点击事件')
        }
    })

但是在1.7版本以后有个最推荐的方法,那就是用on来统一做事件处理.

     //1.注册简单事件.不支持动态绑定
     $('div').on('click',function(){
         console.log('简单事件')
     })

     //2.on注册事件委托.通过绑定其父元素来对元素进行事件委托,支持动态绑定
     $('body').on('click','div,span',function(){
         console.log('委托事件')
     })

    //同样可以绑定多个事件
   $('body').on({
       mouseenter:function(){
           alert('on的鼠标移入事件')
       },
       click:function(){
           alert('on的鼠标点击事件')
       }
   },'div,span')

on用来绑定事件,off用来解绑事件
off()不写参数就是解绑所有事件
off(‘click’)解绑点击事件

        $('#btn').click(function(){
            $('body').off('mouseenter')
            console.log('已移除鼠标移入事件')
        })

trigger() , 用代码的方式触发事件

     var i = 0;
     var timer = setInterval(function(){
         i++
         if(i == 3){
             clearInterval(timer);
             $('#btn').trigger('click');
         }
     },2000)