jQuery学习笔记14-事件自动触发、自定义事件

约定不等于承诺〃 2024-04-17 20:05 96阅读 0赞

一、事件自动触发

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件自动触发</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                width: 200px;
                height: 200px;
                background-color: #FFEE00;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * 1.什么是事件自动触发
                * 打开浏览器时，添加的事件就会自动触发
                * 事件自动触发使用的方法有：trigger、triggerHandler
                *
                *2.trigger和triggerHandler的区别
                * trigger会触发事件冒泡，triggerHandler不会触发事件冒泡
                * trigger会触发默认行为，triggerHandler不会触发默认行为
                * */
                $(".son").click(function () {
                    alert("son")
                });
                $(".father").click(function () {
                    alert("father")
                });
                //trigger自动触发click时，会弹出两个弹框
                // $(".son").trigger("click");
                //trigger自动触发click时，会弹出son弹框
                // $(".son").triggerHandler("click");
    
                $("input[type='submit']").click(function () {
                    alert("submit");
                });
                //trigger自动触发click时，点击确定后，会跳转到淘宝首页
                // $("input[type='submit']").trigger("click");
                //triggerHandler自动触发click时，点击确定后，不会跳转到淘宝首页
                // $("input[type='submit']").triggerHandler("click");
    
                $("span").click(function () {
                    alert("a");
                });
                //要想让trigger自动触发a标签的默认行为，需要将注册写到span标签下
                $("span").trigger("click")
    
    
            })
        </script>
    </head>
    <body>
    <div class="father">
        <div class="son">
    
        </div>
    </div>
    <a href="https://www.baidu.com/"><span>注册</span></a>
    <form action="https://www.taobao.com/">
        <input type="text">
        <input type="submit">
    </form>
    </body>
    </html>

二、自定义事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery自定义事件</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .father{
                width: 200px;
                height: 200px;
                background-color: #FFEE00;
            }
            .son{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * 自定义事件
                * 自定义事件必须通过on绑定
                * 自定义事件必须通过trigger来触发
                * */
    
                $(".father").on("douclick",function () {
                    alert("father");
                });
    
                $(".father").trigger("douclick");
            })
        </script>
    </head>
    <body>
    <div class="father">
        <div class="son">
    
        </div>
    </div>
    <a href="https://www.baidu.com/">注册</a>
    <form action="https://www.taobao.com/">
        <input type="text">
        <input type="submit">提交
    </form>
    </body>
    </html>