Jquery事件绑定

Jquery事件绑定

1.通过事件名称函数绑定

<button id="btn1">事件名称函数</button>

$('#btn1').mouseover(function(){
    $(this).css('background','orange');
}).mouseout(function(){
    $(this).css('background','grey');
});

2.通过on添加（可以添加一个或多个事件）

<button id="btn2">通过on添加</button>

$('#btn2').on('click', function () {
    $(this).css('background', 'blue');
});
//给btn2添加了一个点击事件，点击此按钮背景色就会变蓝

$('#btn2').on('click', { name: 'kaivon' }, function (event) {
    console.log(event.data.name);
});
//给btn2添加了一个name属性

<div id="btn3">
    <h2>标题</h2>
	<p>段落</p>
</div>

$('#btn3').on('click', 'h2', { color: 'red' }, function (event) {
    //$(this)指向h2
    $(this).css('border', '1px solid ' + event.data.color);
});
//事件委托

On添加多个事件

<button id="btn2">通过on添加</button>

$('#btn2').on({
    mouseover: function () {
        $(this).css('background', 'pink');
    },
    mouseout: function () {
        $(this).css('background', 'cyan');
    }
});

3.绑定事件one()

one()与on()的区别就是，one()事件执行完成后就销毁了

<div id="btn4">
    <button>通过one添加</button>
</div>

$('#btn4').one('click', 'button', { color: 'purple' }, function (event) {
    $(this).css('background', event.data.color);
    console.log('只会打印一次');
});

4.解除事件off()

<button id="btn5">解除事件</button>

$('#btn5').click(function () {
	$('#btn1').off();	//没有参数，会把所有的事件全部解除
    $('#btn1').off('mouseover');//只移除mouseover事件
});

5.trigger()和triggerHandler()

手动触发绑定事件

<button id="btn6">trigger触发事件</button>

$('#btn6').on({
    click: function () {
        console.log('btn6的点击事件');
    },
    mouseover: function (event, name, age) {
        console.log('btn6的鼠标移入事件：' + name + ' : ' + age);
        $(this).css('background', 'brown');
    },
    end: function () {
        console.log('这是一个自定义的事件');
    }
});

setTimeout(function () {
    $('#btn6').trigger('click');
}, 500);
setTimeout(function () {
    $('#btn6').trigger('mouseover',['kaivon',18]);
}, 1000);
setTimeout(function(){
    $('#btn6').trigger('end');
},1500);

二者的区别：

• trigger()会触发事件的默认行为而triggerHandler()则不会，比如文本框聚焦
• trigger()会执行所有选中元素的事件，而triggerHandler()只会执行第一个元素的事件
• trigger()会进行事件冒泡，而triggerHandler()则不会
• trigger()可以进行链式操作，而triggerHandler()则不会。因为trigger()返回的值是一个对象，而triggerHandler()返回的是undefined

默认事件

<button id="trigger">trigger</button>
<button id="triggerHandler">triggerHandler</button>
<br>
<input type="text" value="获取焦点">
    
$('input').focus(function(){
    console.log('获取到焦点了');
});

$('#trigger').click(function(){
    $('input').trigger('focus');
});

$('#triggerHandler').click(function(){
    $('input').triggerHandler('focus');
});

执行事件的元素的数量

<ul id="color">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>yellow</li>
</ul>

$('#color li').click(function(){
    console.log($(this).html()+' '+$(this).index());
});
setTimeout(function(){
    $('#color li').trigger('click');//打印所有的li文本以及其索引
    $('#color li').triggerHandler('click');//只打印第一个li文本及其索引
},2000);

是否冒泡

<div id="bubble">
    <h2>
   		 <span>陈学辉</span>
	</h2>
</div>

$('#bubble h2').click(function(){
    console.log('h2被点击了');
});
$('#bubble span').click(function(){
    console.log('span被点击了');
});

setTimeout(function(){
    $('#bubble span').trigger('click');//会逐步打印span,h2被点击了，进行了事件冒泡
    $('#bubble span').triggerHandler('click');//只会打印span被点击了，没有事件冒泡
},2500);

链式操作

<button id="btn7">链式操作</button>

$('#btn7').on({
    mouseover:function(){
        $(this).css('width','200px');
        //return $(this);//如果没有这个返回对象值，那么对于triggerHandler()返回的是undefined
    },
    mouseout:function(){
        $(this).css('height','200px');
    }
});
setTimeout(function(){
    $('#btn7').trigger('mouseover').trigger('mouseout');//可以链式操作
    $('#btn7').triggerHandler('mouseover').triggerHandler('mouseout');//不可以链式操作
},3000);

6.事件对象

<!-- 事件对象 -->
	<button id="btn8">JQ事件对象</button>
	<button id="btn9">JS事件对象</button>

$('#btn8').click(function(event){
    console.log(event);
    //其中有data对象存储数据
});
$('#btn9')[0].onclick=function(ev){
    console.log(ev);
};