开发者学堂课程【jQuery 开发教程:jQuery_ 绑定事件处理器下】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4288
jQuery_ 绑定事件处理器下
一、事件
1、 .delegate():
事件委托,三个参数分别为选择器、事件类型、处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
// 事件委托最常用的是 ul和 li 标签的组合。
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script>
// 文档委托
$(function(){
// 事件委托选择 ul 。第一个为选择器 li ,第二个是点击事件,第三个为 function 函数。
$("ul").delegate("li","click",function(){
// 弹出当前对象的内容
alert($(this).html());
})
})
</script>
</body>
</html>
效果截图:
2、 .on():
添加,可以代替 .bind() 和 .delegate() 。在选定的元素上绑定一个或多个处理函数。
(1)利用 .on() 事件写 button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<button id="btn">
button
</button>
<script>
$(function(){
// 给 click 事件,只绑定一个事件
$("
#btn
").on("click",function(){
alert(
haha
);
})
})
</script>
</body>
</html>
效果截图:
(2)利用 .on() 事件实现事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<button id="btn">
button
</button>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<script>
$(function(){
// 给 click 事件,第二个绑定 li 元素
$("ul").on("click","li",function(){
alert($(this).html());
})
})
</script>
</body>
</html>
效果截图:
(3)给一个元素添加多个事件效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
<style>
p{
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">button</button>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<p>haha</p>
<script>
$(function(){
// 给一个元素添加多个效果
$("p").on("mouseover mouseout",function(){
alert(haha);
})
})
</script>
</body>
</html>
效果截图:
3、 .off():移除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
<style>
p{
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">button</button>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<div>
<p>haha</p>
</div>
<script>
$(function(){
// 添加函数
var fn=function(){
alert("haha");
};
$("div").on("click mouseover","p",fn);
// 将 mouseover 移除,如果什么都不添加,将会移除所有事件。
$("div").off("mouseover","p",fn);
})
</script>
</body>
</html>
效果截图:
4、 .one():
对元素的事件添加处理函数,处理函数在每个元素上,每种事件类型最多执行一次。常用作引导页,因为引导页只执行一次。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
<style>
p{
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<p>haha</p>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
<p>haha</p>
<script>
$(function(){
$("p").one("click",function(){
alert("haha");
})
})
</script>
</body>
</html>
效果截图:
点击一次将会触发,再次点击将不会触发。
5、 .unbind():是 .bind()的移除事件。
6、 .undelegate():是 .delegate()的移除事件。