jQuery三事件
Posted 李宥小哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery三事件相关的知识，希望对你有一定的参考价值。
零、文章目录
文章地址
- 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
- 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn
代码仓库地址
jQuery三、事件
1、jQuery 事件注册
- 语法：
element.事件(function()) - 其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
$(“div”).click(function() 事件处理程序 )
2、jQuery 事件处理
（1）on()绑定事件
- on() 方法优势1：可以绑定多个事件，多个处理事件处理程序。
$(“div”).on(
mouseover: function(),
mouseout: function(),
click: function()
);
$(“div”).on(“mouseover mouseout”, function()
$(this).toggleClass(“current”);
);
- on()方法优势2：可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
$('ul').on('click', 'li', function()
alert('hello world!');
);
- on()方法优势3：动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function()
alert("俺可以给动态生成的元素绑定事件")
);
$("div").append($("<p>我是动态创建的p</p>"));
案例如下：
<!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>事件处理on</title>
<style>
div
width: 100px;
height: 100px;
background-color: pink;
.current
background-color: purple;
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function()
// 1. 单个事件注册
// $("div").click(function()
// $(this).css("background", "purple");
// );
// $("div").mouseenter(function()
// $(this).css("background", "skyblue");
// );
// 2. 事件处理on
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on(
// mouseenter: function()
// $(this).css("background", "skyblue");
// ,
// click: function()
// $(this).css("background", "purple");
// ,
// mouseleave: function()
// $(this).css("background", "blue");
//
// );
$("div").on("mouseenter mouseleave", function()
$(this).toggleClass("current");
);
// (2) on可以实现事件委托（委派）
// $("ul li").click();
$("ul").on("click", "li", function()
alert(11);
);
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function()
// alert(11);
// )
$("ol").on("click", "li", function()
alert(11);
)
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
)
</script>
</body>
</html>
微博发布效果：
- 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。
- 点击的删除按钮，可以删除当前的微博留言。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>微博发布效果</title>
<style>
*
margin: 0;
padding: 0
ul
list-style: none
.box
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
textarea
width: 450px;
height: 160px;
outline: none;
resize: none;
ul
width: 450px;
padding-left: 80px;
ul li
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
input
float: right;
ul li a
float: right;
</style>
<script src="jquery.min.js"></script>
<script>
$(function()
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function()
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
)
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() // 此时的click不能给动态创建的a添加事件
// alert(11);
// )
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function()
$(this).parent().slideUp(function()
$(this).remove();
);
)
)
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
（2）off()解绑事件
- off() 方法可以移除通过 on() 方法添加的事件处理程序。
- 如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
案例如下：
<!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>事件解绑off</title>
<style>
div
width: 100px;
height: 100px;
background-color: pink;
</style>
<script src="jquery.min.js"></script>
<script>
$(function()
$("div").on(
click: function()
console.log("我点击了");
,
mouseover: function()
console.log('我鼠标经过了');
);
$("ul").on("click", "li", function()
alert(11);
);
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function()
alert(11);
)
)
</script>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是屁</p>
</body>
</html>
（3）trigger() 自动触发事件
- 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
$("p").on("click", function ()
alert("hi~");
);
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
element.triggerHandler(type) // 第三种自动触发模式
- triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
案例如下：
<!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>自动触发事件</title>
<style>
div
width: 100px;
height: 100px;
background-color: pink;
</style>
<script src="jquery.min.js"></script>
<script>
$(function()
$("div").on("click", function()
alert(11);
);
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function()
$(this).val("你好吗");
);
// $("input").triggerHandler("focus");
);
</script>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>
3、jQuery 事件对象
- 事件被触发，就会有事件对象的产生。
- 阻止默认行为：event.preventDefault() 或者 return false
- 阻止冒泡： event.stopPropagation()
element.on(events,[selector],function(event) )
案例如下：
<!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>事件对象</title>
<style>
div
width: 100px;
height: 100px;
background-color: pink;
</style>
<script src="jquery.min.js"></script>
<script>
$(function()
$(document).on("click", function()
console.log("点击了document");
)
$("div").on("click", function(event)
// console.log(event);
console.log("点击了div");
event.stopPropagation();
)
)
用于一页引导设计的 JQuery/CSS 事件/动画。 （点击和滚动）