27-jQuery事件自动触发

最新推荐文章于 2024-07-14 03:40:57 发布

杨亚仑

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量928

点赞数

分类专栏： jQuery入门练习

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

版权

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

60 篇文章 0 订阅

订阅专栏

学习了jQuery的事件自动触发，trigger和triggerHandler。

trigger：会触发事件冒泡，会触发默认行为

triggerHandler：不会触发事件冒泡，也不会触发默认行为

面试题：我想要触发a标签的自动触发事件，并且还有触发他的默认行为。

答：使用trigger即可。错！a标签比较特殊，triggle可以触发它的自动事件，但也无法触发它的默认行为，在a标签中加上一个span标签即可，triggle触发span的自动事件，然后触发它的冒泡事件，即a是span的父亲。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-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 () {
            //    编写jQuery相关代码
            /*
            * 1.什么是事件冒泡？
               儿子响应事件，此事件会传给他父亲
            * 2.如何阻止事件冒泡
              在儿子事件中加return  return false或者event.stopPropagation();
            * 3.什么是默认行为
               默认行为就是一些标签自带的默认事件，比如a标签和submit标签
            * 4.如何阻止默认行为
               通过添加return false或event.preventDefault()来阻止默认事件
            * */
                $(".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标签的自动触发事件，并且还有触发他的默认事件。
           /* $("a").click(function () {
                alert("a");
            });
            //a标签比较特殊，这个时候虽然触发了a标签的自动事件，但并不会触发默认行为
            $("a").trigger("click");  */
           /*a这个东西比较特殊，就算是triggre也不能触发它的默认行为，如果即触发a的自动事件，又触发a的默认行为，
            那么需要加个span，如<span>注册</span>这样*/
            //它的原理是通过trigger来触发自动事件，并且触发其冒泡事件。
            //即：a标签的trigger在触发自动事件的时候，不会触发默认行为（其他标签都可以触发默认行为），但可以触发冒泡事件
            $("span").click(function () {
                alert("ss");
            });
            $("span").trigger("click");
        })

    </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>