首页 > 代码库 > HTML 学习笔记 JQuery（事件）

HTML 学习笔记 JQuery（事件）

2024-08-31 14:39:29   222人阅读

加载DOM

以浏览器加载文档为例，在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript中，通常使用window.onload方法，在JQuery中通常使用$(document).ready()方法。$(document).ready()方法是事件模块中的一个重要的函数。可以极大的提高web应用程序的响应速度。JQuery就使用$(document).ready()就是用来替代window.onload的。通过使用该方法，可以在DOM载入就绪时就对齐进行操纵并调用执行它所绑定的函数。再使用过程中，需要注意$(document).ready()方法和window.onload之间的细微区别。

执行时机

$(document).ready()方法和window.onload方法有相似的功能，但是其执行时机方面是有区别的。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行。即JavaScript此时才访问网页中的任何元素。而通过$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对JQuery而言都是可以访问的。但是这并不意味着这些元素关联的文件都已经下载完毕。

由于这个特性，比如我们要对加载的图片进行操作的时候，DOM树加载完毕时，图片可能还没被下载。这个时候，如果你想获取图片的高度等信息 不一定有效。这是可以用到另一个方法load()。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定到window对象，则会在所有对象加载完毕后触发。如果处理函数绑定在元素上，则会在元素内容加载完毕后触发。

$(window).load(function() {
    //编写代码
});
window.onload = function() {
    //编写代码
};

上面的代码是等价的。

多次使用

假设网页中有两个函数，在JavaScript中的代码如下

function one() {
                
}
function two() {
                
}
window.onload = one;
window.onload = two;

在JavaScript中这样的代码 只会执行函数two里面的代码，函数one不被执行的原因是Javascript的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数覆盖前面的函数，因此不能再现有的行为上添加新的行为。

为了达到两个函数顺序触发的效果 只能在创建一个新的Javascript方法来实现。

window.onload = function() {
    one();
    two();
};

这样写有些需求还是满足不了，例如多个JavaScript文件，每个文件都要用到window.onload方法，这种情况下用上面的代码会非常麻烦。而JQuery的$(document).ready()方法能够很好的处理这些情况，每次调用$(document).ready()方法都会在现有的行为上添加新的行为，这些行为会根据注册的顺序依次执行。例如 如下JQuery代码

            function one() {
                alert("one");
            }
            function two() {
                alert("two");
            }
            $(document).ready(function() {
                one();
            });
            $(document).ready(function() {
                two();
            });

简写方式

$(document).ready(function() {
    two();
});
$(function() {
    two();
})
$().ready(function(){
    two();
});

这几种写法是等价的。

事件绑定

在文档加载完成后，如果打算为元素绑定事件来完成某项操作，可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为

bind(type [,data],fn);

bind()方法有三个参数 说明如下

第一个参数是事件的类型，类型包括:blur focus load resize scroll unload click dbclick mouseddown mousemove mouseout等等。

第二个参数是可选参数 作为event.data属性值传递给事件对象的额外数据对象

第三个参数则是用来绑定的处理函数。

基本效果

下面通过一个示例来了解bind()方法的用法

假设网页中又一个FAQ 单击标题 链接内容显示

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .head {
                background-color: darkgray;
            }
            .content {
                display: none;
            }
        </style>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div id="panel">
                    <h5 class="head">什么是JQuery？</h5>
        <div class="content">
            JQuery是继prototype之后又一个优秀的JavaScript库。
        </div>
        </div>

        <script>
            $(function() {
                $("#panel h5.head").bind("click",function() {
                    var $content = $(this).next("div.content");
                    if ($content.is(":visible")) {
                        $content.hide();
                    }else {
                        $content.show();
                    }
                });
            });
        </script>
    </body>
</html>

bind()方法和$(document).ready()方法一样 也可以多次调用

改变事件的绑定类型

$(function() {
    $("#panel h5.head").bind("mouseover",function() {
        var $content = $(this).next("div.content");
        if ($content.is(":visible")) {
            $content.hide();
        }else {
            $content.show();
        }
    });
})

简写绑定事件

        <script>
            $(function() {
                $("#panel h5.head").click(function() {
                    var $content = $(this).next("div.content");
                    if ($content.is(":visible")) {
                        $(this).next("div.content").hide();
                    }else {
                        $(this).next("div.content").show();
                    }
                });
            });
            $(function() {
                $("#panel h5.head").mouseover(function() {
                    var $content = $(this).next("div.content");
                    if ($content.is(":visible")) {
                        $content.hide();
                    }else {
                        $content.show();
                    }
                });
            })
        </script>

合成事件

JQuery中有两个合成事件---hover()和toggle()方法，类似于前面讲过的ready()方法，hover()方法和toggle()方法都属于JQuery的自动移方法。

hover()方法

语法

hover(enter,leave)

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter)，当光标移出这个元素时，会触发指定的第二个函数(lever)

例如将上面的例子 可以这样写

$(function() {
    var $content = $("#panel div.content");
        $("#panel h5.head").hover(function() {
            $content.show();
    },function() {
        $content.hide();
    });
});

注意：CSS中有伪类选择器 例如":hover" 当用户光标停在元素上的时候，可以改变元素的外观，大多数浏览器中 伪类选择器可以用于任何元素，然而在IE6中 不支持这种选择器 ，可以使用JQuery的hover()方法代替。

2. toggle()方法

语法

toggle(fn1,fn2,.....fnN)

toggle()方法用于模拟鼠标的连续点击事件。第一次单击元素 触发指定的第一个函数(fn1) 当再次点击同一个元素的时候，则触发第二个函数(fn2)，如果有更多的函数，则依次触发。直到最后一个。

$(function() {
                $("#panel h5.head").click(function(){
                    $(this).next("div.content").toggle();
                });
            });

由于事件的冒泡或者捕捉如果有很多个元素绑定事件的话，点击其中的一个很可能会响应多个，造成不必要的麻烦。这个时候我们会阻止事件的冒泡行为，或者阻止事件的默认行为。要做到这些必须先了解事件对象event

事件对象

由IE-DOM 和标准DOM实现事件对象的方法各不相同,导致在不同的浏览器中获取事件的对象比较麻烦，针对这个问题，JQuery进行了必要的扩展和封装，从而使得任何浏览器都能很轻松的获取事件对象以及事件对象的一些属性

在程序中使用事件对象非常简单，只需要为函数添加一个参数，代码如下

$("element").click(function(event)

这样当点击了"element"元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件的对象就被销毁。

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行 使用方法stopPropagation()方法来停止事件冒泡

$("#panel h5.head").click(function(event){
    event.stopPropagation();
    $(this).next("div.content").toggle();
});

阻止事件的默认行为

网页中的元素有自己的默认行为 比如点击链接跳转 有时需要阻止元素的默认事件

在Jquery中使用preventDefault()方法来阻止事件的默认行为.

简写形式

event.stopPropagation();
return false;
event.preventDefault();
return false;

事件对象的属性

event.type()方法

该方法的作用是可以获取到事件的类型

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        
    </head>
    <body>
        <p id="eventP">事件对象demo</p>
        
        <script>
            $("#eventP").click(function(event) {
                alert(event.type);
            });
        </script>
        
    </body>
</html>

提示结果"click"

event.preventDefault()方法

阻止事件的默认行为 例如 点击标签a 不发生跳转

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        
    </head>
    <body>
        <p id="eventP">事件对象demo</p>
        <a id="evnetA" href="http://www.baidu.com">百度一下</a>
        <script>
            $("#eventP").click(function(event) {
                alert(event.type);
            });
            $("#evnetA").click(function(event){
                event.preventDefault();
                //或者 这两句代码一句就行
                return false;
            })
        </script>
        
    </body>
</html>

3. event.stopPropagation()阻止事件的冒泡行为

4.event.target()方法

event.target()方法的作用就是获取到触发事件的元素。

例如

$("#eventP").click(function(event) { alert(event.type); alert(event.target.getAttribute("id"));//eventP });

event.relatedTarget()方法

在标准的DOM中，mouseover 和 mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget()方法来访问的。event.relatedTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法，在mouseout中相当于IE浏览器的event.toElement方法。

event.pageX 和 event.pageY方法

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用JQuery时，那么IE浏览器中是用event.x()和event.y()方法 而在Firefox中是用event.pageX()和event.pageY()。如果页面上有滚动条 则还要加上滚动条的高度或者宽度，在IE浏览器中默认减去2px的边框。

event.which()方法

该方法的作用是在鼠标单击事件中获取到鼠标的左 中 右键：在键盘事件中获取键盘的按键

            $("#eventP").click(function(event) {
//                alert(event.type);
//                alert(event.target.getAttribute("id"));//eventP
                alert(event.which)//1 鼠标左键 2 鼠标中键 3鼠标右键
            });

event.metakey()方法

针对不同的浏览器对键盘中的<ctrl>按键的解释不同，JQuery也进行了封装，并规定event.matekey()方法获取键盘事件中的<ctrl>键。

event.originalEvent()方法

该方法的作用是指向原石的事件对象。

可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素，使用以下代码为该元素绑定相同的事件

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        
    </head>
    <body>
        <button id="test">点我哦</button>
        <script>
            $("#test").click(function() {
                $(this).append("<p>我的绑定函数</p>")
            }).click(function() {
                $(this).append("<p>我的绑定函数2</p>")
            }).click(function() {
                $(this).append("<p>我的绑定函数3</p>")
            });
        </script>
    </body>
</html>

点击按钮后

技术分享

移除按钮上以前注册的函数

首先在网页上添加一个移除事件的按钮

$("#delteAll").click(function() {
    $("#test").unbind("click");
});

添加这些按钮id为deteleAll 写上如上代码 id为test的按钮 不再会有click事件。

下面来看一看unbind()方法的语法结构

unbind([type][,data]);

第一个参数为事件类型 第二个参数为要移除的函数 具体说明如下

(1)如果没有参数 移除所有的绑定的事件

(2)如果提供了事件类型作为参数 则只删除该类型的绑定事件

(3)如果 把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数被删除。

移除button元素的七种一个事件。

首先要为这些匿名处理函数指定一个变量

例如 下面的JQuery代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
        
    </head>
    <body>
        <button id="test">点我哦</button>
        <button id="delteAll">移除按钮事件</button>
        <script>
            $("#test").click(myFunction1 = function() {
                $(this).append("<p>我的绑定函数</p>")
            }).click(myFunction2 = function() {
                $(this).append("<p>我的绑定函数2</p>")
            }).click(myFunction3 = function() {
                $(this).append("<p>我的绑定函数3</p>")
            });
　　　　　　　//删除某一个事件
            $("#delteAll").click(function() {
                $("#test").unbind("click",myFunction1);
            });
        </script>
    </body>
</html>

先点击删除事件 再点击测试按钮 效果如下 绑定函数1被移除

技术分享

另外对于只需要触发一次，随后就需要立即解除绑定的情况，JQuery提供了一种简写方法:one()方法。

one()方法的结构与bind()方法类似，使用方法也与bind()方法相同，语法如下

one(type [data],fn)

示例代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <button id="oneBtn">执行一次就取消绑定的按钮</button>
        <script>
            $("#oneBtn").one("click",function() {
                $(this).append("<p>执行一次就被销毁</p>");
            });
        </script>
    </body>
</html>

使用one()方法绑定的事件处理函数，只在用户点击第一次时有作用，之后点击毫无作用。

模拟操作

以上的例子都是用户通过点击按钮 才能触发click事件，但是有时，需要通过模拟用户操作，来达到单机的效果。例如：在用户进入页面后，就触发click事件，而不需要用户主动去单机。(就是进入页面后主动调用一次)

在JQuery中可以通过trigger()方法来完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

$("#btn").click(function() {
    alert("不用点击 通过trigger()函数 模拟点击");
});
$("#btn").trigger("click");

这样当页面加载完毕以后，就会立即弹出来一个窗口。

也可以使用期简化写法click()，来达到同样的效果

//$("#btn").trigger("click");
$("#btn").click();//与上面的代码一样的效果。

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

例如为函数绑定一个"myClick"事件 JQuery代码如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <button id="oneBtn">执行一次就取消绑定的按钮</button>
        <button id="btn">模拟事件</button>
        <button id="MyClick">模拟自定义事件</button>
        <script>
            $("#oneBtn").one("click",function() {
                $(this).append("<p>执行一次就被销毁</p>");
            });
            $("#btn").click(function() {
                alert("不用点击 通过trigger()函数 模拟点击");
            });
//            $("#btn").trigger("click");
            $("#btn").click();
            $("#MyClick").bind("myClick",function() {
                alert("模拟用户触发自定义事件");
            });
            $("#MyClick").trigger("myClick");
        </script>
    </body>
</html>

传递数据

trigger(type [,data])方法有两个参数，第一个参数就是要触发的事件类型，第二个参数就是要传递给事件处理函数的附加数据。以数组的形势传递。通常可以传递一个参数给毁掉函数来区别这次事件是代码触发还是用户触发的。

例子：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <button id="trigger">传递数据</button>
        <script>
            $("#trigger").bind("myClick",function(event,message1,message2) {
                alert(message1 +message2);
            });
            $("#trigger").trigger("myClick",["我的自定义事件","我们是传递的参数"]);
        </script>
    </body>
</html>

执行默认的操作

trigger()方法触发事件后 会执行浏览器默认的操作

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

以上代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本很得到焦点(这是浏览器的默认操作)

如果只想触发绑定的focus事件，而不想执行浏览器默认操作。可以使用JQuery中另一个类似的方法。 triggerHandler()方法。

$("input").trigger("focus");//执行两次 一次模拟 一次浏览器默认
//只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作
$("input").triggerHandler("focus");//只执行用户模拟的一次

其他用法

绑定多个事件类型

例如可以为一个元素绑定多个事件类型 为id是 moreEventType 添加多个类型的事件。

$("#moreEventType").bind("click mouseout",function(){
    $(this).toggleClass("over");
});

添加命名空间 便于管理

例如可以把为元素绑定的多个事件类型用命名空间规范起来，JQuery代码如下

$(function() {
    $("div").bind("click.plugin",function() {
        $("body").append("<p>click点击事件</p>")
    });
    $("div").bind("mouseover.plugin",function() {
        $("body").append("<p>mouseover事件</p>");
    });
    $("div").dblclick(function() {
        $("body").append("<p>dbClick事件</p>");
    });
    $("#trigger").click(function() {
        $("div").unbind(".plugin");
    });
});

在所有绑定的事件类型的后面添加命名空间，这样在删除事件时只需要指定命名空间就好，而不在命名空间内的dbclick事件仍然存在。

删除多个事件也可以使用链式代码

$("div").unbind("click").unbind("mousemove");

相同事件名称，不同命名空间执行方法

例如可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用，代码如下

$(function() {
    $("div").bind("click",function() {
        $("body").append("<p>click事件</p>");
    });
    $("div").bind("click.plugin",function() {
        $("body").append("<p>click.plugin事件</p>");
    });
    $("#trigger").click(function() {
        $("div").trigger("click!");//注意感叹号；
    });
});

当点击div元素是两者都触发，当点击按钮时只触发click事件。！表示只匹配不包含在命名空间里的方法。去掉！两者都会执行。

 

HTML 学习笔记 JQuery（事件）


联系
我们