jQuery_ 绑定事件处理器下|学习笔记

开发者学堂课程【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>

效果截图:

jQuery_ 绑定事件处理器下|学习笔记

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>

效果截图:

jQuery_ 绑定事件处理器下|学习笔记

(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>

效果截图:

jQuery_ 绑定事件处理器下|学习笔记

(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>

效果截图:

jQuery_ 绑定事件处理器下|学习笔记

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>

效果截图:

jQuery_ 绑定事件处理器下|学习笔记

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>

效果截图:

点击一次将会触发,再次点击将不会触发。

jQuery_ 绑定事件处理器下|学习笔记

5、 .unbind():是 .bind()的移除事件。

6、 .undelegate():是 .delegate()的移除事件。

上一篇:jQuery_表单事件|学习笔记


下一篇:jQuery_DOM 移除、DOM 替换|学习笔记