天天看点

jquery 模拟事件触发的一些总结

元素的大部分事件都是用户触发执行的,比如click事件,mousemove事件,等等

当然,可以通过代码来模拟用户的操作

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $('#btn1').click(function () {
                alert('click first button')
            })

            $('#btn2').click(function () {
                $('#btn1').trigger('click')
            })
        })
    </script>
</head>
<body>
<button id="btn1">click me</button>
<button id="btn2">模拟点击第一个按钮</button>
</body>
</html>
           

trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。

triggerHandler()方法同样也能触发被选元素上指定的事件

但是二者也有区别

区别1 .trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只会影响匹配到的第一个元素。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            // 给按钮绑定click事件处理函数
            $("input[type=button]").click(function(event){
                alert($(this).val());
            });

            // 选中的button集合中,触发所有button的click,打印出button1,button2,button3
            $("input[type=button]").trigger("click");
        })
    </script>
</head>
<body>
<input type="button" id="1" value="button1">
<input type="button" id="2" value="button2">
<input type="button" id="3" value="button3">
</body>
</html>
           
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            // 给按钮绑定click事件处理函数
            $("input[type=button]").click(function(event){
                alert($(this).val());
            });
            
            // 选中的button集合中,只触发第一个button的click事件,只打印出button1
            $("input[type=button]").triggerHandler("click");
        })
    </script>
</head>
<body>
<input type="button" id="1" value="button1">
<input type="button" id="2" value="button2">
<input type="button" id="3" value="button3">
</body>
</html>
           

区别2:由triggerHandler()创建的事件不会在DOM树种冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.min.js"></script>
    <style>
        #outA {
            width: 400px;
            height: 400px;
            border: solid 1px #CDC9C9;
            position: relative
        }

        #outB {
            width: 200px;
            height: 200px;
            border: solid 1px #0000ff;
            top: 50px;
            left: 50px;
            position: absolute;
        }

        #outC {
            width: 100px;
            height: 100px;
            border: solid 1px #FFB90F;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $("#outA").click(function () {
                alert("A");
            });
            $("#outB").click(function () {
                alert("B");
            });
            $("#outC").click(function () {
                alert("C");
            });
            
            // 使用trigger,依次C、B、A
            $("#outC").trigger("click");


        });
    </script>
</head>
<body>
<div id="outA">A
    <div id="outB">B
        <div id="outC">C</div>
    </div>
</div>
</body>
</html>
           
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.min.js"></script>
    <style>
        #outA {
            width: 400px;
            height: 400px;
            border: solid 1px #CDC9C9;
            position: relative
        }

        #outB {
            width: 200px;
            height: 200px;
            border: solid 1px #0000ff;
            top: 50px;
            left: 50px;
            position: absolute;
        }

        #outC {
            width: 100px;
            height: 100px;
            border: solid 1px #FFB90F;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $("#outA").click(function () {
                alert("A");
            });
            $("#outB").click(function () {
                alert("B");
            });
            $("#outC").click(function () {
                alert("C");
            });

            // 使用trigger,只会打印出C
            $("#outC").triggerHandler("click");

        });
    </script>
</head>
<body>
<div id="outA">A
    <div id="outB">B
        <div id="outC">C</div>
    </div>
</div>
</body>
</html>
           

区别三:trigger会触发事件的默认行为,而triggerHandler则不会(如表单提交)。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        function myvalid()
        {
            var name = $('#name').val()
            if (name== '' || name == null) {
                alert('用户名不能为空')
                $('#name').focus()
                // return false
            }

        }

        $(function () {
            $('#form1').trigger('submit')
            // $('#form1').triggerHandler('submit')
        })
    </script>
</head>
<body>
<form id="form1" action="1.php" method="post" onsubmit="return myvalid()">
    <div>
        <label for="name">用户名</label>
        <input type="text" name="name" id="name">
    </div>
    <input type="submit" value="submit">
</form>
</body>
</html>