版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
26-jQuery事件冒泡和默行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-jQuery事件冒泡和默行为</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
/*
1.什么是事件冒泡?
2.如何阻止事件冒泡
3.什么是默认行为?
4.如何阻止默认行为
*/
/*
$(".son").click(function (event) {
alert("son");
// return false;
event.stopPropagation(); //【阻止事件冒泡】
});
$(".father").click(function () {
alert("father");
});
*/
$("a").click(function (event) {
alert("弹出注册框");
// return false;
event.preventDefault(); //【阻止默认行为】
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
27-jQuery事件自动触发
<script>
$(function () {
// 编写jQuery相关代码
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// $(".father").trigger("click");
// $(".father").triggerHandler("click");
/*
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
*/
// $(".son").trigger("click");
// $(".son").triggerHandler("click");
$("input[type='submit']").click(function () {
alert("submit");
});
/*
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
*/
// $("input[type='submit']").trigger("click");
// $("input[type='submit']").triggerHandler("click");
$("span").click(function () {
alert("a");
});
// $("a").triggerHandler("click");
$("span").trigger("click");
});
</script>
28-jQuery自定义事件
$(function () {
// 编写jQuery相关代码
// $(".son").myClick(function (event) {
// alert("son");
// });
/*
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger / triggerHandler来触发
*/
$(".son").on("myClick", function () {
alert("son666");
});
$(".son").triggerHandler("myClick");
});
29-jQuery事件命名空间
<script>
$(function () {
/*
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger / triggerHandler触发事件
*/
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").triggerHandler("click.ls");
});
</script>
30-jQuery事件命名空间 注意点
<script>
$(function () {
$(".father").on("click.ls", function () {
alert("father click.1s");
});
$(".father").on("click", function () {
alert("father click");
});
$(".son").on("click.ls", function () {
alert("son click.1s");
});
/*
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
*/
// $(".son").trigger("click.ls"); //【两个弹窗】
// $(".son").trigger("click"); //【三个弹窗】
});
</script>