jQuery事件

一、绑定事件

1. .on()在选定的元素上绑定一个或多个事件处理函数。

<ul>
    <li>1111</li>
    <li>2222</li>
</ul>
<button class="btn">点击</button>
<button class="cli">打我</button>
<script src="js/jQuery1.12.4.js"></script>
<script> 
    $('.btn').mouseover(function(){
        $('.btn').css({
            'background-color':'pink'
            });
    }).mouseout(function(){
        $('.btn').css({
            "background-color":'#6f9a55'
        });
    });
    $('.cli').on('click',{color:'pink'},function(e){
        $('.cli').css('background-color',e.data.color)
    });//可获取请求的数据
    $('ul:eq(0)').on('click','li',{color:'pink'},function(e){
        $(this).css('background-color',e.data.color);
        console.log($(this).text());
        //this指向点前的事件对象li
    });//'li'及事件委托
    $('.cli').on({
        mouseover:function(){
            console.log($(this).text());
            //this指向.cli
        },
        mouseout:function(){
            console.log('别打我');
        }
    });
</script>

2. .one():为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。

<div>
    <button>点我</button>
</div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('div').one('click','button',{color:'pink'},function(e){
        $(this).css('background-color',e.data.color);
        console.log(1111);
    });
</script>

二、解绑事件

1. .off():移除一个事件处理函数。

<div>
    <button class="btn">点我</button>
    <button class="cli">取消</button>
</div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.btn').on('mouseover',{color:'pink'},function(e){
        $(this).css('background-color',e.data.color);
        console.log(1234);
    });
    $(".cli").click(function(){
        $(".btn").off('mouseover');//没有参数，会把所有的事件全部解除
        //$("div").off();
    });
    //父级事件委托给子元素无法用off解绑子元素，因为解绑后父级又会委托，只能直接解绑父元素
</script>

三、手动触发绑定事件

1. .trigger():根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
2. .triggerHandler():为一个事件执行附加到元素的所有处理程序。

<button class="btn">点我</button>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.btn').on({
        click:function(){
            console.log('点击事件');
        },
        end:function(){
            console.log('自定义事件');//自定义事件通过trigger/triggerHandler触发
        }
    });
    setTimeout(function(){
        $('.btn').trigger('click');
    },500);
    setTimeout(function(){
        $('.btn').trigger('end');
    },800);
    setTimeout(function(){
        $('.btn').triggerHandler('click');
    },1000);
    setTimeout(function(){
        $('.btn').triggerHandler('end');
    },1200);
</script>

区别

区别1

trigger()会触发事件的默认行为；triggerHandler()不会触发事件的默认行为

<input type="text">
<button class="btn">trigger</button>
<button class="cli">triggerHandler</button>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('input').focus(function(){
        console.log('获取到焦点了');
    });
    $('.btn').click(function(){
        $('input').trigger('focus');
    });//输入框会获取焦点
    $('.cli').click(function(){
        $('input').triggerHandler('focus');
    });//不会
</script>

区别2

trigger()会执行所有选中元素的事件；triggerHandler()只会执行第一个元素的事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('ul li').click(function(){
        console.log($(this).text()+' '+$(this).index());
    });
    setTimeout(function(){
        $('ul li').trigger('click');
    },500);//三个依次输出
    setTimeout(function(){
        $('ul li').triggerHandler('click');
    },1000);//只输出第一个
</script>

区别3

trigger()会冒泡；triggerHandler()不会冒泡

<div>
    <p>
        1111
        <span>2222</span>
    </p>
</div>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('div p').click(function(){
        console.log('p被点击了');
    });
    $('div span').click(function(){
        console.log('span被点击了');
    });
    setTimeout(function(){
        $('div span').trigger('click');
    },500);
    setTimeout(function(){
        $('div span').triggerHandler('click');
    },1000);
</script>

区别4

trigger()可以使用链式操作；triggerHandler()不可以使用链式操作

<button class="btn">点我</button>
<script src="js/jQuery1.12.4.js"></script>
<script>
    $('.btn').on({
        mouseover:function(){
            $(this).css('width','200px');
            // return $(this);//让triggerHandler可以链式操作
        },
        mouseout:function(){
            $(this).css('height','200px');
        }
    });
    setTimeout(function(){
        $('.btn').trigger('mouseover').trigger('mouseout');
    },500);
    setTimeout(function(){
        $('.btn').triggerHandler('mouseover').triggerHandler('mouseout');
        //无法链式操作因为triggerHandler并没有返回操作对象,加上return $(this)即可
    },1000);
</script>