20181025 jquery的事件机制

最新推荐文章于 2022-08-09 15:33:36 发布

宫城诗

最新推荐文章于 2022-08-09 15:33:36 发布

阅读量180

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_36344771/article/details/83388183

版权

javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

jQuery的事件机制
完整的机制，注册事件，移除事件，也可以去触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点我产生新标签</button>
<div>
    <p>1111</p>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
        //注册简单事件，缺点：一次只能注册一个事件
       // $("p").click(function () {
       //     alert("西西");
       // });
       // $("p").mouseover(function () {
       //     console.log("嗷呜");
       // });
       //通过bind注册事件
       //  $("p").bind("click",function () {
       //      alert("蛤蛤");
       //  })
       //  $("p").bind({
       //      click:function () {
       //          console.log(("我是bind的click"));
       //      },
       //      mouseenter:function () {
       //          console.log(("我是bind的mouseenter"));
       //      }
       // })
        // 假如新建了元素按照以上两种方法无法对新建的p标签进行
        $("#btn").click(function () {
            $("<p>我是新建的p标签</p>").appendTo("div")
        });

        //delegate 代表，委派代表
        //delegate（）参数 第一个是选择器 第二个是事件类型 第三个不用管 第四个是function
        $("div").delegate("p","click",function () {
            console.log(("嘻嘻嘻嘻嘻我是delegate方法产生的"));
        })
        //第一个参数是事件最终由谁来执行，
        //第二个参数：事件的类型
        //第三个参数：function，函数要去做什么
        //给父级元素注册，但是最后还是给子元素执行
        

        //简单事件，给自己注册的事件，自己来执行
        //委托事件，不是自己执行，


        //动态创建的也能有事件
        //后来on统一了所有的事件处理方法
        //既可以注册简单事件也可以注册委托事件


    })
</script>

</body>
</html>

Title 点我产生新标签

1111

关于on方法注册事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点我</button>
<div>
    <p>111</p>
    <p>22</p>
    <p>33</p>
    <p>44</p>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
       $("p").on("click",function () {
           alert("呵呵");
       });
       $("div").on("click","p",function () {
           console.log(("我是由on函数出现的"));
       });
       $("button").click(function () {
           $("<p>我是新建的p标签</p>").appendTo("div");
       })
    })

</script>
</body>
</html>

事件执行的顺序，先是委托事件，然后是自己的事件

事件解绑的顺序，可以有unbind 还有undelegate 都不推荐使用
还是off进行事件的解绑

总结：jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性，不用担心兼容问题

阻止浏览器的默认行为
e.preventDefault()；阻止浏览器默认行为
e.stopPropagation();阻止事件冒泡

return false //既可以阻止浏览器默认行为，又可以阻止事件冒泡

宫城诗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20181025 jquery的事件机制

jQuery的事件机制完整的机制，注册事件，移除事件，也可以去触发事件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&
复制链接

扫一扫

专栏目录