目录
1. jQuery事件注册
单个事件注册
语法：
element.事件(function() {})$("div").click(function() { 事件处理程序 })其他事件和原生基本一致
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div></div>
<script>
$(function () {
// 1. 单个事件注册 需要注册多个
$("div").click(function () {
$(this).css("background", "purple");
});
$("div").mouseenter(function () {
$(this).css("background", "blue");
});
})
</script>
</body>
2. jQuery事件处理
2.1 事件处理 on() 绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:
element.on(events,[selector],fn)- events：一个或多个事件类型
- selector：元素的子元素选择器，比如如果element是ul，那么selector可以是li
- fn：回调函数 即绑定在元素身上的侦听函数
on()方法优势1：
可以绑定多个事件，多个处理事件处理程序
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div></div>
<script>
$(function () {
// 2. 事件处理on
$("div").on({
click: function () {
$(this).css("background", "purple");
},
mouseenter: function () {
$(this).css("background", "blue");
},
mouseleave: function () {
$(this).css("background", "green");
}
});
})
</script>
</body>如果事件处理程序相同
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div></div>
<script>
$(function () {
// 2. 事件处理on
$("div").on("mouseenter mouseleave", function () {
$(this).toggleClass("current");
});
})
</script>
</body>on()方法优势2：
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父亲
//事件绑定在ul身上，但是触发的是li
$("ul").on("click","li",function() {
alert("hello world");
});在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的用on代替
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div></div>
<ul>
<li>我没事就吃溜溜梅你别管我了</li>
<li>我没事就吃溜溜梅你别管我了</li>
<li>我没事就吃溜溜梅你别管我了</li>
<li>我没事就吃溜溜梅你别管我了</li>
</ul>
<ol></ol>
<script>
$(function () {
// 事件委派
$("ul").on("click", "li", function () {
alert("吃翔吧");
});
})
</script>
</body>
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给未来动态生成的元素绑定事件，而单个注册的事件没有办法绑定未来动态生成的元素
案例：发布微博案例
步骤：
- 当点击发布按钮的时候，动态生成一个li
- li里面的内容是：在文本框里面输入的内容 还有一个删除的超链接
- 新发布的内容用下滑（slideDown）动画显示
- 显示新发布的内容之后，文本框置空
- 点击删除时，当前要删除的内容（li）上滑，同时删除当前内容
注意：
1.要删除的li是先上滑，之后再删除，所以，删除li的代码写在了slideUp事件的回调函数里
2.不能用单个事件绑定来给ul里面的a绑定事件，而是应该用on，因为动态生成的代码，是写在btn的点击事件的回调函数里，代码执行的时候，不会等待回调函数执行，而是直接向下执行，单个事件绑定ul里面的a的时候，发现a还没有被动态生成，所以无法实现效果。应该使用on()，可以给未来动态生成的代码绑定事件
<!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").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.2 事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$("p").off(); //解绑p元素所有事件处理程序
$("p").off("click",foo); //解绑p元素上面的点击事件 后面的foo是侦听函数
$("ul").off("click","li"); //接触事件委托 
$("ul").on("click", "li", function () {
alert("2222222222");
});
$("ul").off("click", "li"); //解除了ul身上的事件委派
如果有的事件只想触发一次，可以使用one()来绑定事件
$("p").one("click",function() {
alert(111);
});2.3 自动触发事件trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
element.click(); //第一种简写形式
element.trigger("type"); //第二种自动触发模式$("p").on("click",function() {
alert("hi");
});
$("p").trigger("click"); //此时自动触发点击事件，不需要鼠标点击<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");
});
</script>
<body>
<div></div>
</body>
element.triggerHandler(type); //第三种自动触发模式第三种方法和前两种的区别就是：不会触发元素的默认行为
比如说，一个给input绑定focus事件，默认行为是获取焦点之后会有光标闪动，如果用了triggerHandler，自动触发的时候，就不会触发光标闪动的默认行为
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
$("input").on("focus", function () {
$(this).val("你好吗");
});
// $("input").trigger("focus"); 光标闪烁
$("input").triggerHandler("focus"); //光标不闪烁
});
</script>
3.jQuery事件对象
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event) {});阻止默认行为：event.preventDefault() 或者 return false;
阻止冒泡：event.stopPropagation()
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
$(document).on("click", function (e) {
alert("点击了document");
});
$("div").on("click", function (e) {
alert("点击了div");
});
})
</script>
<body>
<div></div>
</body>
阻止事件冒泡。。。。。
<script>
$(function () {
$(document).on("click", function (e) {
alert("点击了document");
});
$("div").on("click", function (e) {
alert("点击了div");
e.stopPropagation(); //阻止事件冒泡
});
})
</script>
扫一扫
3278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
