事件绑定
- jQuery中事件绑定有两种方式
-
eventName(fn) 绑定对应事件名的监听
-
on(eventName, fn) 通用的绑定事件监听
- 两种方式都可以添加多个相同或者不同类型的事件,不会覆盖
- 区别
-
eventName(fn) 编码效率略高,但部分事件jQuery没有实现,所以不能添加
-
on(eventName, fn)编码效率略低，但所有js事件都可以添加
- 实际开发中能用eventName就用eventName, 不能用eventName就用on
<script>
$(function () {
$("button").click(function () {
alert("hello world");
});
$("button").on("click", function () {
alert("hello on");
});
});
</script>
事件解绑
- jQuery中可以通过
off(eventName,function)解绑事件
<script>
$(function () {
function test() {
alert("hello test");
}
$("button").click(test);
// 如果不传递参数,移除所有事件
$("button").off();
// 如果传递一个参数, 会移除所有指定类型的事件
// 移除button的click事件
$("button").off("click");
// 如果传递两个参数, 会移除所有指定类型的指定事件
// 移除button上test的click事件
$("button").off("click", test);
});
</script>
事件冒泡和默认行为
- 事件冒泡
- 阻止事件冒泡
- 多数情况下，触发一个元素的事件处理程序时，不影响它的父元素, 此时便可以使用停止事件冒泡
<script>
$(function () {
$(".son").click(function (event) {
// 阻止事件冒泡
// return false;
event.stopPropagation();
});
$(".father").click(function () {
console.log(".father");
});
});
</script>
- 事件默认行为
- 元素有自己的默认行为,例如单击超链接后会跳转,点击提交表单按钮会提交
- 阻止事件默认行为
- 使用
event.preventDefault()方法阻止事件默认行为
<script>
$(function () {
$("a").click(function (event) {
alert("弹出注册框");
// return false;
event.preventDefault();
});
});
</script>
自动触发事件
- 什么是自动触发事件
- 通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发
- 自动触发事件方式
-
$("selector").trigger("eventName");
- 触发事件的同时会触发事件冒泡
- 触发事件的同时会触发事件默认行为
-
$("selector").triggerHandler("eventName");
- 触发事件的同时不会触发事件冒泡
- 触发事件的同时不会触发事件默认行为
<script>
$(function () {
$("a").click(function (event) {
$(".son").click(function () {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// trigger会触发事件冒泡
$(".father").trigger("click");
$(".son").trigger("click");
// triggerHandler不会触发事件冒泡
$(".father").triggerHandler("click");
$(".son").triggerHandler("click");
});
</script>
自定义事件
- 什么是自定义事件
- 自定义事件就是人为的起一个不存在的事件名称来注册事件, 通过这个名称能触发对应的方法执行
- 自定义事件的前提条件
- 事件必须是通过
on绑定的
- 事件必须通过
trigger来触发
<script>
$(function () {
$(".son").on("myClick", function () {
alert("son");
});
$(".son").triggerHandler("myClick");
});
</script>
事件命名空间
- 什么是事件命名空间
- 企业开发中，如果多人同时给某一个元素绑定了相同类型的事件,但是事件处理的方式不同，此时就可能引发事件混乱，甚至造成事故。为了解决这个问题jQuery提出了事件命名空间的概念
- 事件命名空间主要用于区分相同类型的事件，在不同前提条件下到底应该触发哪个人编写的事件
- 格式:
eventName.命名空间
- 事件命名空间的前提条件
- 事件是通过
on来绑定的
- 通过
trigger触发事件
<script>
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
</script>
- 注意点
- 不带命名空间事件被
trigger调用,会触发带命名空间事件
- 带命名空间事件被
trigger调用,只会触发带命名空间事件
- 利用
trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
- 利用
trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
事件委托
- 什么是事件委托
- 事件委托就是请其他人帮忙做我们想做的事
- 做完之后最终的结果还是会反馈到我们这里
- 事件委托的好处
- 减少监听数量
- 如果访问dom的次数越多，那么浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这是实际开发中不想看到的
- 有每个监听的函数都是一个对象，既然是对象就会占用内存，对象越多，内存占用率就越大，整体性能自然会越来越差
- 新增元素自动有事件响应处理
默认情况下新增的元素无法响应新增前添加的事件
- jQuery中添加事件委托
<script>
// 让ul帮li监听click事件
$("ul").delegate("li", "click", function () {
console.log($(this).html());
});
</script>
jQuery移入移出事件
<script>
$(function () {
// 移入事件
$('.father').mouseover(function () {
console.log('mouseover') ;
});
// 移出事件
$('.father').mouseout(function () {
console.log('mouseout') ;
});
});
</script>
<script>
$(function () {
// 移入事件
$('.father').mouseenter(function () {
console.log('mouseenter');
});
// 移出事件
$('.father').mouseleave(function () {
console.log('mouseleave');
});
});
</script>
-
hover
- 内容监听移入和移出
- 子元素被移入移出不会触发父元素的事件
- 内部实现就是调用mouseenter和mouseleave
<script>
$(function () {
// 传入两个回调函数,一个监听移入,一个监听移出
$(".father").hover(function () {
console.log("mouseenter");
}, function () {
console.log("mouseleave");
});
// 如果只传入一个参数,那么这个方式既监听移入也监听移出
$(".father").hover(function () {
console.log("In Out");
});
});
</script>
