黑马程序员技术交流社区

标题: 【黑马程序员济南】jquery中trigger()和triggerHandler()的区别 [打印本页]

作者: 大山哥哥 时间: 2017-8-30 19:23
标题: 【黑马程序员济南】jquery中trigger()和triggerHandler()的区别
      在平时上课过程中,在学习jquery的时候,有不少同学对于jquery里面得事件处理不是很了解,尤其是trigger()和triggerHandler()方法,所以今天就整理了下关于这块的相关资料给大家详细说明下.
   其实对于trigger和triggerHandler来说,他们有一个共同点就是主动触发事件,但是,很多人容易搞混什么情况下用什么.ok咱们直接上代码,带着大家来好好屡一下.
   那就先从trigger来说把.看代码.

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script type="text/javascript" src="./jquery-1.8.3.js"></script>

        <script type="text/javascript">

    $(function(){ 

            $("#outA").click(function(){

                    alert("A");

            });

            $("#outB").click(function(){

                    alert("B");

            });

                $("#outC").click(function(){

                    alert("C");

            });

           });  



        </script>

</head>

<body>

         <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">    

        <div id="outB" style="height:200px; background:#0000ff;top:100px;position:relative;">    

            <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">

            </div>     

        </div>    

    </div>    

</body>

</html>

我们看到了有三个div标签,C在B中,B在A中,一层套一层,我们分别给每个div添加了一个点击事件.但是如果我们点击C的时候,看到了什么结果,是不是弹出了3个框,分别显示C-->B-->A.这个顺序正好是按照从里到外依次触发.而这种现象叫做点击冒泡.但这种效果真的是咱们所希望的么?我们通常这种情况下都会选择只让C弹框显示.
那这里怎么办.这个时候我们就可以通过主动触发事件来操作了.但是大家需要注意,如果是通过trigger来触发C的click事件的话会和被动点击一样也会弹出三个对话框,分别显示C-->B-->A.但是如果使用triggerHandler的形式来触发C的点击操作则会弹出C.
代码如下

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script type="text/javascript" src="./jquery-1.8.3.js"></script>

        <script type="text/javascript">

    $(function(){ 

            $("#outA").click(function(){

                    alert("A");

            });

            $("#outB").click(function(){

                    alert("B");

            });

                $("#outC").click(function(){

                    alert("B");

            });

                //弹出C-->B-->A

                $("#outC").trigger("click")

                //弹出C

            $("#outC").triggerHandler("click")

           });  



        </script>

</head>

<body>

         <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">    

        <div id="outB" style="height:200px; background:#0000ff;top:100px;position:relative;">    

            <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">

            </div>     

        </div>    

    </div>    

</body>

</html>

这是第一个需要注意的地方,那就是trigger会引起事件冒泡,而triggerHandler不会引起事件冒泡.

第二个需要注意的点是,trigger在触发操作后会默认执行浏览器得相应事件,triggerHandler不会触发浏览器相应事件.

代码如下

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script type="text/javascript" src="./jquery-1.8.3.js"></script>

        <script type="text/javascript">

                $(function(){

                        $("#old").click(function(){

                          $("input").trigger("focus");

                        });

                        $("#new").click(function(){

                          $("input").triggerHandler("focus");

                        });

                        $("input").focus(function(){

                          $("<span>Focused!</span>").appendTo("body").fadeOut(2000);

                        });

                });        

        /**

         * trigger:  

         *                 1:引起了focus的回调方法.

         *                 2:input也获得了焦点

         * triggerHandler:

         *                 1:引起了focus的回调方法.

         *                 2.input未获得焦点

         */

        </script>

</head>

<body>

        <button id="old">.trigger("focus")</button>

        <button id="new">.triggerHandler("focus")</button><br/><br/>

        <input type="text" value="To Be Focused"/>

</body>

</html>

ok~,那到此为止相信大家对于trigger和triggerHandler应该有个比较清晰得理解了把~

作者: jingxian90 时间: 2017-8-31 15:32
条理清晰，简明扼要，言简意赅

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2