27-jQuery事件自动触发

最新推荐文章于 2023-04-09 21:22:15 发布

旧爱学长

最新推荐文章于 2023-04-09 21:22:15 发布

阅读量168

点赞数

分类专栏： jQuery基础

本文链接：https://blog.csdn.net/weixin_43324273/article/details/105462390

版权

jQuery基础专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-jQuery事件自动触发</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $(".son").click(function (event) {
                alert("son");
            });

            $(".father").click(function () {
                alert("father");
            });
            // $(".father").trigger("click");
            // $(".father").triggerHandler("click");

            /*
            trigger: 如果利用trigger自动触发事件,会触发事件冒泡
            triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
            */
            // $(".son").trigger("click");
            // $(".son").triggerHandler("click");

            $("input[type='submit']").click(function () {
                alert("submit");
            });

            /*
            trigger: 如果利用trigger自动触发事件,会触发默认行为
            triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
            */
            // $("input[type='submit']").trigger("click");
            // $("input[type='submit']").triggerHandler("click");

			各例面试题：给a标签增加自动触发，并且触发默认行为
            $("span").click(function () {
                alert("a");
            });
            // $("a").triggerHandler("click");不会触发默认行为
            $("a").trigger("click");还是不会触发默认行为
            $("span").trigger("click");会触发默认行为（给a标签里面的内容加上一个span,当点击span(儿子)就会触发a(父亲)的事件冒泡，从而a标签的默认行为跳转就会发生）
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

旧爱学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
27-jQuery事件自动触发

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>26-jQuery事件冒泡和默行为</title> <style> *{ margin: 0; ...
复制链接

扫一扫

专栏目录