事件绑定
eventName(fn);
- 编码效率略高，部分事件JQuery事件没有实现，所以不能添加。（只能用JQuery定义的事件）
$("button").click(function () {
alert("hello word");
});
on(eventName,fn);
$("button").on("click", function () {
alert("hello word2S");
});
注意：两种方法都可以添加多个相同/不同类型的事件，不会覆盖
事件解绑
off(eve,[sel],[fn])
$("button").off();
- off方法如果传递一个参数, 会移除所有指定类型的事件
$("button").off("click");
- off方法如果传递两个参数, 会移除所有指定类型的指定事件
function test1() {
alert("hello lmx");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("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);
什么是冒泡事件？
-
点击father的时候会弹出father -
点击son的时候会弹出son和father
如何阻止冒泡事件？
什么是默认行为？
如何阻止默认行为？
<script>
$(function () {
$(".father").click(function () {
alert("我是father");
});
$(".son").click(function (event) {
alert("我是son");
//方法1
return false;
//方法2
event.stopPropagation();
});
$("a").click(function (event) {
alert("点击了a标签");
//方法1
return false;
//方法2
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">百度一下</a>
</body>
事件自动触发
trigger()
triggerHandler()
$(".father").click(function () {
alert("我是father");
});
$(".son").click(function () {
alert("我是son");
});
/*
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
*/
$(".son").trigger("click");
$(".son").triggerHandler("click");
$("span").click(function () {
alert("点击了span标签");
});
/*
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
*/
$("span").trigger("click");
$("a").triggerHandler("click");
trigger与triggerHandler区别
-
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡 -
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
自定义事件
自定义事件不是真正意义上的事件，可以把它理解为自定义函数，触发自定义事件就相当于调用自定义函数。
想要自定义事件, 必须满足两个条件
-
事件必须是通过on绑定的 -
事件必须通过trigger来触发
$(".son").on("myClick", function () {
alert("点击了son");
});
$(".son").trigger("myClick");
事件命名空间
jQuery支持事件命名空间，以方便事件管理。例如，在下面的示例中，为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就是事件类型后面以点语法附加一个别名，以便引用事件，如”myClick.one”，其中”one”就是click当前事件类型的别名，即事件命名空间（相当于给自定义事件起别名）
$(".son").on("myClick.one", function () { alert("myClick1"); }); $(".son").on("myClick.two", function () { alert("myClick2"); }); $(".son").trigger("myClick.one");
事件命名空间注意点
利用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 click1 和 father click1 $(".son").trigger("click");//弹出son click1 和 father click1 和 father click2
事件委托
delegate(selector,[type],[data],fn)
/*以下代码的含义, 让ul帮li监听click事件之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁*/$("ul").delegate("li", "click", function () { console.log($(this).text());});
注意：jQuery 3.0中已弃用此方法，请用 on()代替。
$("ul").on("click", "li", function () { console.log($(this).text()); });
移入移出事件
mouseover()
mouseout()
子元素被移入移出也会触发父元素的事件
$(".father").mouseenter(function () {
console.log("鼠标移入了");
});
$(".father").mouseleave(function () {
console.log("鼠标移出了");
});
mouseenter()
mouseleave()
子元素被移入移出不会触发父元素的事件
$(".father").mouseenter(function () {
console.log("鼠标移入了");
});
$(".father").mouseleave(function () {
console.log("鼠标移出了");
});
hover([over],out)
-
一个参数时：移入移出都触发 -
两个参数时：第一个移入触发，第二个移出触发
$(".father").hover(
function () {
console.log("鼠标移入了");
},
function () {
console.log("鼠标移出了");
}
);
|