Skip to main content
 Web开发网 » 站长学院

30-jQuery-事件命名空间面试题

2021年10月11日8880百度已收录

30-jQuery-事件命名空间面试题  jQuery面试 第1张

<!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被点击了)

30-jQuery-事件命名空间面试题  jQuery面试 第2张

30-jQuery-事件命名空间面试题  jQuery面试 第3张

// 用trigger触发一个不带带命名空间的事件,那么子元素所有相同类型的事件和父级所有相同类型的事件

// 都会被触发

$(".son").trigger("click")

30-jQuery-事件命名空间面试题  jQuery面试 第4张

</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>

评论列表暂无评论
发表评论
微信