这里使用的jquery是1.11.3
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
以“click" 事件为例，讲解如何使用这些事件
使用方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
console.log('clicking me')
})
})
</script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>使用方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#btn').bind('click',function () {
console.log('clicking me')
})
})
</script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>使用方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#btn').on('click', function () {
console.log('clicking me')
})
})
</script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>使用方式四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('body').delegate('#btn', 'click', function () {
console.log('clicking me')
})
})
</script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>已经弃用的 live
live()支持jquery1.8-
以上几种使用方式有什么区别呢？
从jquery1.7后推荐使用on绑定事件，on()是bind(), live(), delegate()方法的替代品。
值得注意的是：on不仅仅作用于当前绑定的元素，对于未来有脚本语言创建的元素也会有同样的作用。
继续看示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo p{
cursor: pointer;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$(function () {
$("#btn").click(function () {
$("#demo").append("<p>这是一个新的p元素</p>");
});
$('#demo p').click(function () {
alert($(this).text());
})
// 或者使用以下方式
// $('#demo p').bind('click', function () {
// alert($(this).text());
// })
})
</script>
</body>
</html>上面代码运行的测试结果是：
对于已存在的<p>元素，'click'事件是起作用的；但对于新添加的<p>元素，我们写的'click'事件并不感冒
无论直接绑定click，还是使用bind 绑定click，结果都一样
如果使用”on“绑定click，结果又如何?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo p{
cursor: pointer;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$(function () {
$("#btn").click(function () {
$("#demo").append("<p>这是一个新的p元素</p>");
});
$('#demo p').on('click', function () {
alert($(this).text());
})
})
</script>
</body>
</html>上面的代码，测试结果同bind一样：对于新添加的元素<p>，并不能执行click事件
其实，我们对on的使用并不完全了解
jquery文档中bind和on函数绑定事件的用法：
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)
从文档中可以看出，.on方法比.bind方法多一个参数'selector'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo p{
cursor: pointer;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$(function () {
$("#btn").click(function () {
$("#demo").append("<p>这是一个新的p元素</p>");
});
//正确的使用方式
$('#demo').on('click','p',function () {
alert($(this).text())
})
})
</script>
</body>
</html>.on(events [,selector] [,data], handler)
那么这个selector参数的好处是什么?
好处在于.on方法进行事件委托，子元素把事件委托给父元素进行事件处理；
这样的好处
1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；
2.为动态添加的元素也能绑上指定事件；
