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

最新推荐文章于 2020-04-11 23:46:50 发布

weeds606

最新推荐文章于 2020-04-11 23:46:50 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100168746

版权

前端相关专栏收录该内容

42 篇文章 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>

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记14-事件自动触发、自定义事件

一、事件自动触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery事件自动触发</title> <style> *{ margin: 0; ...
复制链接

扫一扫

专栏目录