事件绑定与移除
jQuery中有两种绑定事件方式
1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
$("button").click(function () {
alert("hello lnj");
});
2.on(eventName, fn);
$("button").on("click", function () {
alert("hello click2");
});
$("button").on("mouseleave", function () {
alert("hello mouseleave");
});
- 编码效率略低/ 所有js事件都可以添加
- 事件委托、事件命名空间可以利用
注意点:
可以添加多个相同或者不同类型的事件,不会覆盖
事件移除
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
alert("hello mouseleave");
});
$("button").mouseenter(function () {
alert("hello mouseenter");
});
// off方法如果不传递参数, 会移除所有的事件
// $("button").off();
// off方法如果传递一个参数, 会移除所有指定类型的事件
// $("button").off("click");
// off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
事件冒泡-默认行为-自动触发
1.什么是事件冒泡?
2.如何阻止事件冒泡
3.什么是默认行为?
4.如何阻止默认行为
阻止事件冒泡的两种方式
$(".son").click(function (event) {
alert("son");
//1. return false;
// 2.event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
阻止默认事件的两种方式
$("a").click(function (event) {
alert("弹出注册框");//阻止默认行为
//1. return false;
//2.event.preventDefault();
});
自动触发事件和事件冒泡
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// $(".father").trigger("click");自动触发事件
// $(".father").triggerHandler("click");自动触发事件且不会触发事件冒泡
// $(".son").trigger("click");
// $(".son").triggerHandler("click");
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
$("input[type='submit']").trigger("click");
$("input[type='submit']").triggerHandler("click");
注意
针对a 标签 triggerHandle属性失效，依然会触发默认事件
解决方法
a里面包裹span，对span进行触发
$("span").trigger("click");
自定义事件-命名空间-事件委托
自定义事件
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger/triggerHandler来触发
// 编写jQuery相关代码
// $(".son").myClick(function (event) {
// alert("son");
// });
$(".son").on("myClick", function () {
alert("son");
});
//以下为自定义事件的触发，默认为自动触发事件
//实际开发中可以设置为其他部分的事件变化下触发下面自定义事件
$(".son").triggerHandler("myClick");
命名空间
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
通过命名空间可以对多个事件= 相同事件类型，不同事件执行进行分类管理
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
注意
- 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
- 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
示例代码：
$(".father").on("click.ls", function () {
alert("father click1");
});
$(".father").on("click", function () {
alert("father click2");
});
$(".son").on("click.ls", function () {
alert("son click1");
});
// $(".son").trigger("click.ls");
$(".son").trigger("click");
事件委托
1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们
针对没有事件的元素，（动态创建的元素无法直接添加事件），利用事件委托为其添加事件
$("ul>li").click(function () {
console.log($(this).html());//对新增的li无效
});
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
以下代码的含义, 让ul帮li监听click事件
之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
$("ul").delegate("li", "click", function () {
console.log($(this).html());//对新增的li有效
});
移入移出小技巧
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
该事件设置在父元素上，默认儿子不属于自己一部分
$(".father").mouseover(function () {
console.log("father被移入了");
});
$(".father").mouseout(function () {
console.log("father被移出了");
});
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
推荐大家使用
$(".father").mouseenter(function () {
console.log("father被移入了");
});
$(".father").mouseleave(function () {
console.log("father被移出了");
});
小技巧
//一个方法实现监听移入和移出两个方法
$(".father").hover(function () {
console.log("father被移入了");
},function () {
console.log("father被移出了");
});