jQuery学习笔记——事件的绑定和解绑
1.元素绑定事件的方法
元素对象可以直接点相应的事件名，就可以实现绑定事件：元素对象.事件.事件……。
bind()方法：bind({‘事件名’:function() {事件处理程序},})方法 多个事件中间使用分号隔开。
delegate()方法： 父元素对象.delegate(子元素，事件名称，事件处理函数)
on()****:对象名.on(事件名,事件处理函数); 或者父级元素.on(事件名称，子元素，事件处理函数)。
注意：此时函数的this指向的是子级元素 不是父级元素。
bind(),delegate(),on()三种绑定事件的方法，推荐使用on()。
由于事件冒泡，所以触发子级元素的事件，父级元素同样也会被触发。
//对象直接点事件名
$('#btn').click(function() {
alert('Hello');
}).mouseover(function() {
alert('World');
});
//bind()方法绑定事件 '事件名':function() {事件处理程序}，多个事件之间逗号隔开
$('#btn1').bind({
'click':function() {
alert('Hello World');
},
'mouseover':function() {
$(this).css('backgroundColor','red');
},
'mouseout':function() {
$(this).css('backgroundColor','');
}
});
//delegate()
$('#btn2').click(function() {
//把创建的p标签添加到id为div1的div元素内
$('Hello World
').appendTo($('#div1'));
//为父元素内的子元素p 注册事件
$('#div1').delegate('p','click',function() {
alert('Hello!');
})
}
$('#btn3').on('click',function() {
//在id为div2内添加一个P标签元素
$('#div2').append($('Hello World
'));
// on()方法 父元素对象.on('事件名称','子元素','事件处理函数')
$('#div1').on('click','p',function() {
alert('Hello World');
})
});
$('#btn4').on('click',function() {
// 由于事件冒泡 点击子级元素p的时候 也会触发到父级元素div
$('#div2>p').on('click',function() {
alert('p Hello World');
});
}
2.解绑事件
对象名.off(事件名)，解绑on()绑定事件的方法
unbind(),解绑bind()方法 **undelegate()**解绑delegate()方法。
注意事项：
1.如果父级元素和子级元素都绑定了相同的事件，那么通过off()解绑父级元素的事件，那么子级元素的事件没有被解绑。
2.如果子级元素是通过父级元素调用delegate的方式绑定的事件，父级元素使用off的方式解绑事件，此时父级元素和子级元素相同的事件都会解绑。
3.off()：没有设置参数，那么是移除所有的事件。
4.父级元素对象.off(事件名,’**’)：移除子级元素的事件，父级元素的事件还存在，前提是子级元素绑定事件使用的是父级对象.delegate(子级对象,事件名,事件处理函数); 。
// 解绑事件
$('#btn5').on('click',function() {
// $('#btn4').off('click');
// $('#div2').off('click'); 子级元素p可以触发点击事件 但是不会由于事件冒泡而触发父级元素div
// $('#div2').off(); 移除所有该元素的所有事件
('#div2').off('click','**');//移除自己元素的事件，父级元素的事件还存在
});
3.触发事件
触发某个事件的时候，在该事件内部调用该元素的某个事件方法
三种方法：
直接调用事件方法 对象.事件名
使用trigger(事件名)
triggerHandler(事件名)
注意：第一种方式和第二种方式是相同的，都会获取到浏览器默认的事件，但是第三种方法triggerHandler()不会触发到浏览器默认事件（需要自己定义事件）。
$('#btn7').on('click',function() {
// 第一种方法 直接调用 事件方法
// $('#btn6').click();
// 第二种方法 使用trigger(事件名)方法
// $('#btn6').trigger('click');
// 第三种方法 使用triggerHandler(事件名)方法
$('#btn6').triggerHandler('click');
});
4.获取事件对象
如：$(‘div’).on(‘click’,‘input’,function() {})
event.delegateTarget：调用事件的对象 div
event.currentTarget：绑定的事件 input绑定的是click事件
event.target：真正触发事件的对象 点击input 触发事件
获取键盘值 event.keyCode
取消事件冒泡
事件冒泡：元素之间还有元素，并且子元素和父元素都有相同的事件，触发子元素的事件，父元素的事件也会被触发。
取消事件冒泡：return false;event.preventDefault()，使用return false;也可以取消浏览器默认的行为。
// 事件对象
$('#div3').on('click','input',function(event) {
//event.delegate：调用事件的对象
console.log(event.delegateTarget);
//绑定的事件
console.log(event.currentTarget);
//真正触发事件的对象
console.log(event.target);
});
// 事件冒泡：触发子元素事件，对应的父元素一级一级触发
$('#box1').on('click',function() {
alert('点击box1');
});
$('#box2').on('click',function() {
alert('点击box2');
return false; //box2取消事件冒泡 父元素box1就不会触发
});
$('#box3').on('click',function() {
alert('点击box3');
});
// return false 取消浏览器默认行为
$('#target').on('click',function() {
alert('Hello World');
return false; //取消a标签默认跳转行为，只会弹出对话框
});
//a标签的HTML代码：
<a href="https://www.baidu.com" id="target">百度</a>
//点击a标签默认跳转到百度网页，使用return false;取消默认行为