目录
4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式
一、jQuery事件机制
JavaScript中已经学习了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大地增强了事件的处理能力。
二、jQuery注册事件的发展历程
1.简单事件绑定 click()
不支持同时注册，也不支持动态注册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<script src="jq.min.js"></script>
<script>
$(function() {
$('div').click(function() {
console.log('鼠标单击事件');
})
$('div').mouseenter(function() {
console.log('鼠标移入事件');
})
})
</script>
</body>
</html>2.bind方式注册事件
支持同时注册但是不支持动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<script src="jq.min.js"></script>
<script>
$(function() {
$('div').bind({
mouseenter: function() {
console.log('鼠标移入事件');
},
click: function() {
console.log('鼠标单击事件');
}
})
})
</script>
</body>
</html>3.delegate注册委托事件
支持同时注册，也支持动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<script src="jq.min.js"></script>
<script>
$(function() {
$('body').delegate('div',{
mouseenter: function() {
console.log('鼠标移入事件');
},
click: function() {
console.log('鼠标单击事件');
}
})
})
</script>
</body>
</html>4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式
（1）on注册简单事件
//表示给$(元素)绑定事件，并且由自己触发，不支持动态绑定
$(元素).on('click',function() {});（2）on注册委托事件
//表示给$(元素)绑定代理事件，当必须是它的内部元素才能触发这个事件，支持动态绑定
$(元素).on('click','内部元素',function() {});（3）事件委托原理
var ul = document.querySelector('#ul');
ul.onclick = function(e) {
if(e.target.tagNAme.toLowerCase() === 'li') {
console.log(e.target);
}
}三、事件解绑
1.unbind方式（不用）
$().unbind();
//解绑所有事件
$().unbind('click');
//解绑指定事件2.undelegate方式
$(元素).undelegate();
//解绑所有的delegate事件
$(元素).undelegate('click');
//解绑所有的click事件3.off方式（推荐）
$(元素).off();
//解绑匹配元素的所有事件
$(元素).off('click');
//解绑匹配元素的所有click事件四、jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性；一般用事件参数e来获取
1.screenX和screenY 对应屏幕最左上角的值
2.clientX和clientY 距离页面左上角位置（忽视滚动条）
3.pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
4.event.stoPropagation() 阻止事件冒泡行为
5.event.preventDefault() 阻止浏览器默认行为
6.return false; 既能阻止事件冒泡，又能阻止浏览器默认行为
7.event.keyCode 按下的键盘代码