JS学习二十：JQuery中的事件

一、页面加载事件

原生JS的页面加载事件：window.onload = function

JQ的页面加载事件：$(document).ready(function)

示例：

        <p>p...</p>
        <script type="text/javascript" charset="UTF-8">
            // 原生
//             window.onload = function(){
//                 alert("页面加载成功");
//             }
            $(document).ready(function(){
                alert("页面加载成功123");
            })
//             // 简写
//             $().ready(function() {
//                 alter("xyz")
//             })
//             // 简写
//             $(function() {
//                 alert("abc")
//             })
        </script>

 

两者的区别：

在一个文档完全下载到浏览器时（包括所有关联的文件，例如图片、横幅等），就会响应window.onload()方法。

在所有的DOM元素完全就绪以后，但不包括关联文件，就会响应$(document).ready(function)方法。

 

问题：

所以，在使用$(document).ready(function)要注意：由于响应此方法时，关联文件未加载，如果响应方法使用到关联文件，则会失效。

解决办法：可以使用JQ中，另一个关于页面加载的方法：$(window).load(function)方法。

load()方法，会在元素的onload事件中绑定一个处理函数。

如果这个处理函数绑定到window对象上，就会在所有内容，包括关联文件都加载完后触发。

如果绑定在元素上，则会在元素的内容加载完后触发。

$(window).load(function)方法等同于window.onload(function)

 

二、JQ中的事件：

说明：fn参数，表示一个函数，事件处理程序就写在这个函数中。

 

三、事件绑定

原生JS中的事件绑定，有四种方式。

JQ绑定事件，有四个方法：bind，delegate，on，live

        <button id="btn">添加一个p标签</button>
        <div>
            <p>p1.....</p>
            <p>p2.....</p>
            <p>p3.....</p>
            <p>p4.....</p>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                // JQ绑定事件方式一：bind
                // 示例:给div下的所有p标签绑定事件
//                 $("div p").bind("click", function() {
//                     console.log($(this).text())
//                 })
                // bind方法的问题:1.隐式迭代,对给定元素中所有元素,迭代的方式,给每一个指定的元素绑定事件.会绑定多次.
                // 问题2: 对于尚未存储的标签,无法绑定事件.如下面新增的标签,无法绑定
                // $("div").append("<p>new p........</p>")
                // 所以bind适合于对id属性绑定事件,因为id属性是唯一的,不会出现以上两个问题.
                
                
                // JQ绑定事件方式二：delegate
                // delegate可以解决bind中的两个问题:只会绑定一次事件,同时尚未存在标签在后来新增后,事件也会传递到此标签上.
                // 这种方式,叫做事件委托.示例事件绑定在div上,事件会像冒泡一样,传递到指定的标签上.
//                 $("div").delegate("p", "click", function() {
//                     console.log($(this).text())
//                 })
//                 $("div").append("<p>new p........</p>")
                // delegate的缺点: 如果绑定的标签,层次很深,会消耗性能.
                
                // JQ绑定事件方式三：on,最常用
                // on对以上两种方式的统一，既可像bind一样绑定多个，又类似于delegate方式, 绑定在一个元素上,通过冒泡传递绑定的事件
                $("div").on("click", "p", function() {
                    console.log($(this).text())
                })
                $("div").append("<p>new p........</p>")
                
                // JQ绑定事件方式四：live,很少使用
            })
        </script>

 

 delegate，on能适用的事件，必须是冒泡事件，才可有效绑定。如click，mousedown，mouseup，keydown，keypress，keymove

 总结 ：

• 选择器匹配到的元素比较多的时侯，不要使用bind()，它迭代绑定事件
• 用id选择器时，可以用bind()
• 需要给动态添加的元素绑定时，用delegate()或on()
• 用delegate（）和on()方法，dom树不要太深
• 语法区别：deletgate(后代标签，事件，函数)，on(事件，后代标签，函数)
• 尽量使用on()
• 可见，一般能使用到的是on()或bind()方法。

 

四、移除绑定事件

移除绑定：unbind，undelegate，off

        <div>
            <p>p1.....</p>
            <p>p2.....</p>
            <p>p3.....</p>
            <p>p4.....</p>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $("div p").bind("click", function() {
                    console.log($(this).text())
                })
                $("div p").unbind("click")
                
                $("div").delegate("p", "click", function() {
                    console.log($(this).text())
                })
                $("div").undelegate("p", "click")
                
                $("div").on("click", "p", function() {
                    console.log($(this).text())
                })
                $("div").off("click", "p")
            })
        </script>

 

 

五、一次性事件

还有一种绑定方式：one，一次性事件。事件发生一次以后，就不再起作用。较少使用

        <button id="btn2">按钮</button>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#btn2").one("click", function() {
                    console.log($(this).text())
                })
            })
        </script>

 

 

六、模拟用户操作触发事件

trigger(事件)，triggerHandle(事件)

这两个方法，实现的效果基本一样。唯一区别：

triggerHandle()，不会导致浏览器同名的默认行为被执行。

trigger()，会导致浏览顺同名的默认行为的执行。可以通过return false，也可以阻止默认行为被执行。

        <button id="btn">添加一个p标签</button>
        <button id="btn2">按钮</button>
        <script type="text/javascript">
            // tigger模拟事件发生
            $("#btn").bind("click",function() {
                console.log("************")
            }).trigger("click")
            // 传递参数
            $("#btn2").bind("click",function(e, msg1, msg2) {
                console.log(msg1 + "************" + msg2)
            }).trigger("click", ["args1", "args2"])
        </script>
    </body>

七、模拟鼠标悬念事件 

hover(移入时的函数，移出时的函数)

        <button id="btn2">按钮</button>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn2").hover(function() {
                    console.log("移入")
                }, function() {
                    console.log("移出")
                })
            })
            // 同下面的代码功能一样
//             $("#btn2").bind("mouseover", function() {
//                 console.log("移入")
//             })
//             $("#btn2").bind("mouseover", function() {
//                 console.log("移出")
//             })
        </script>

 

 

八、事件对象

查看事件类型：e.type

触发事件的DOM元素：e.target

返回与事件相关联的DOM元素，e.relateTarget，如移入时，从哪个DOM元素移入的；移出时，移出到了哪个DOM元素。

 

九、事件冒泡、阻止默认行为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body style="width: 500px; height: 500px;">
        <div id="box"></div>
        <input type="text" name="in" id="put"/>
        <a href="red.html" id="link">跳转到红页面</a>
        <script type="text/javascript">
            $(document).ready(function(){
                $("body").bind("click", function() {
                    $(this).css("background-color", "blue")
                })
                
                $("#box").bind("click", function(e) {
                    $(this).css("background-color", "yellow")
                    // 阻止冒泡方式一:
                    e.stopPropagation()
                    // 阻止冒泡方式二: 
                    // return false,除了可以阻止冒泡,还可以阻止默认行为·
                    return false
                })
                
                $("input").bind("click", function(e) {
                    e.stopPropagation()
                })
                
                $("#link").bind("click", function(e) {
                    // 阻止冒泡
                    e.stopPropagation()
                    var d = window.confirm("网站有病毒！确认继续访问?")
                    if ( d == false) {
                        // 阻止默认行为:跳转页面
                        e.preventDefault()
                        // return false
                    }
                })
            })
        </script>
    </body>
</html>