<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>30-jQuery-事件命名空间面试题</title>
<!-- <script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
</script> -->
<style type="text/css">
.son{
width: 100px;
height: 100px;
background-color: #0000FF;
border: black solid 3px;
.father{
width: 200px;
height: 200px;
background-color: #FF0000;
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
// 想要事件的命名空间有效，必须满足两个条件
// 事件是通过on来绑定的
// 通过trigger来触发事件的
$(function(){
$(".father").on("click.zhangsan", function(){
alert("父级红色div被点击了")
$(".father").on("click",function(){
alert("父级红色div又被点击了")
$(".son").on("click.zhangsan", function(){
alert("子级蓝色div被点击了")
// 用trigger触发一个带命名空间的事件， 那么父级带相同命名空间的事件也会被触发
// 而父级不带命名空间的事件不会被触发
// $(".son").trigger("click.zhangsan") // 自动触发了（子级蓝色div被点击了）和（父级红色div被点击了）
// 用trigger触发一个不带带命名空间的事件，那么子元素所有相同类型的事件和父级所有相同类型的事件
// 都会被触发
$(".son").trigger("click")
</script>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<a href=";
<a href=";
<form action=";
<input type="text"/>
<input type="submit"/>
</form>
</body>
</html>
