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

最新推荐文章于 2024-01-09 16:16:12 发布

杨亚仑

最新推荐文章于 2024-01-09 16:16:12 发布

阅读量173

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/82972549

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

当事件命名空间遇见triggle。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>30-jQuery事件命名空间面试题</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script>
        $(function () {
            //带命名空间的父元素事件
            $(".father").on("click.ls",function (event) {
                alert("father click1");
            });
            //不带命名空间的父元素事件
            $(".father").on("click",function (event) {
                alert("father click2");
            });
            //带命名空间的子元素事件
            $(".son").on("click.ls",function (event) {
                alert("son click1");
            });

            //进行两种触发测试，
            // 1.触发带命名空间的子元素
            // 2.触发不带命名空间的子元素
            // $(".son").trigger("click.ls");//依次弹出son click1和father click1
            $(".son").trigger("click");//依次弹出son click1，father click1和father click2
            /*
           结论：
     1.利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发
     2.利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
          * */
        })
    </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>