JQuery 事件&事件代理
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 事件&事件代理相关的知识，希望对你有一定的参考价值。
jQuery事件
1. 常用事件
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- ready() DOM加载完成
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 等页面加载完成以后获取标签元素
// $(document).ready(function()
// );
$(function()
// 获取ul里面的所有li标签
var $lis = $("ul li");
// 获取button标签
var $btn = $("#btn1");
// 获取text标签
var $text = $("#txt1");
// 获取div标签
var $div = $("div");
// 添加点击事件
$lis.click(function()
// 获取当前点击的标签对象
// 原生js的写法
// this.style.color = 'red';
// jquery的写法
$(this).css("color":"red");
// 获取点击标签的索引
alert($(this).index())
);
$btn.click(function()
// 获取文本框的内容
alert($text.val());
);
// 给text文本框添加获取焦点事件
$text.focus(function()
// 获取得到焦点的文本框，然后设置样式属性
$(this).css("background":"red");
);
// 给text文本框添加失去焦点事件
$text.blur(function()
$(this).css("background":"white");
)
// 给div设置鼠标悬停(进入)事件
$div.mouseover(function()
$(this).css("background":"green");
);
// 给div设置鼠标离开事件
$div.mouseout(function()
$(this).css("background":"white");
)
);
</script>
</head>
<body>
<div>
<ul>
<li>苹果</li>
<li>鸭梨</li>
<li>香蕉</li>
</ul>
<input type="text" id="txt1">
<input type="button" id="btn1" value="你点我">
</div>
</body>
</html>
说明:
- this指的是当前发生事件的对象，但是它是一个原生js对象
- $(this) 指的是当前发生事件的jquery对象
2. 笔记
jQuery常用事件:
-
click() 鼠标单击
-
blur() 元素失去焦点
-
focus() 元素获得焦点
-
mouseover() 鼠标进入（进入子元素也触发）
-
mouseout() 鼠标离开（离开子元素也触发）
-
ready() DOM加载完成
-
原生js修改样式：
this.style.color = 'red'; -
jquery的写法：
$(this).css("color": "red") -
获取点击标签的索引:
alert($(this).index())
事件代理
- 能够知道事件代理的使用方式
1. 事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作， 事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:
<script>
$(function()
var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.click(function()
alert($(this).html());
);
$div2.click(function()
alert($(this).html());
);
);
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
说明:
当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。
2. 事件代理的使用
一般绑定事件的写法:
$(function()
$ali = $('#list li');
$ali.click(function()
$(this).css(background:'red');
);
)
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件代理的写法
$(function()
$list = $('#list');
// 父元素ul来代理子元素li的点击事件
$list.delegate('li', 'click', function()
// $(this)表示当前点击的子元素对象
$(this).css(background:'red');
);
)
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
delegate 方法参数说明:
delegate(childSelector,event,function)
- childSelector: 子元素的选择器
- event: 事件名称，比如: ‘click’
- function: 当事件触发执行的函数
3. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 事件冒泡，就是事件会一级一级往上(父控件)传递 -->
<script>
$(function()
// 获取标签
var $btn = $("#btn1");
var $div = $("div");
$btn.click(function()
alert("我是按钮");
// 扩展: 取消事件冒泡，就是不让事件向父级控件传递
// 默认是事件会进行冒泡
return false;
);
// $div.click(function()
// alert("我是div");
// );
// 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
var $ul = $("div ul");
$ul.delegate("li", "click", function()
$(this).css("color": "red");
);
// 扩展： 可以代理不同子控件的事件
var $div1 = $("#box");
// 可以代理不同子控件的事件, 多个选择器之间使用逗号进行分割即可
$div1.delegate("#p2,#btn2", "click", function()
alert('ok');
);
);
</script>
</head>
<body>
<div>
<p id="p1">哈哈</p>
<input type="button" value="按钮" id="btn1">
<ul>
<li>哈哈</li>
<li>嘻嘻</li>
<li>美滋滋</li>
<li>啦啦</li>
</ul>
</div>
<div id="box">
<p id="p2">哈哈</p>
<input type="button" value="按钮" id="btn2">
</div>
</body>
</html>
4. 小结
- 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
- 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
- 事件代理使用是使用delegate方法来完成
- 事件冒泡，就是事件会一级一级往上（父控件）传递
return false: 便不会进行冒泡- 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
var $ul = $("div ul");
$ul.delegate("li, ll", "click", function()
$(this).css("color":"red")
);
- 拓展：可以代理不同子控件的事件
加油!
感谢!
努力!
以上是关于JQuery 事件&事件代理的主要内容，如果未能解决你的问题，请参考以下文章