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

简介: 快速学习 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>

效果截图:

图片1.png

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.png

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

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

效果截图:

图片4.png

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>

效果截图:

图片5.png

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>

效果截图:

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

图片6.png

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

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

相关文章
|
5月前
|
JavaScript 前端开发
jQuery中绑定事件的方式
jQuery中绑定事件的方式
114 1
|
JavaScript
jQuery筛选&文档处理器
jQuery筛选&文档处理器
52 0
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
56 13
|
5月前
|
JavaScript 前端开发
jQuery中绑定事件的方式有几种
jQuery中绑定事件的方式有几种
42 1
|
5月前
|
JavaScript 开发者
jQuery能绑定事件监听吗
jQuery能绑定事件监听吗
49 0
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
6月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
12月前
|
JavaScript
jQuery绑定事件
jQuery绑定事件
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript API
Jquery绑定事件的方法
Jquery绑定事件的方法