jQuery 事件绑定

Posted 2021-02-13 认真对待世界的小白

在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用 bind() 方法来对匹配元素进行特定事件的绑定，bind() 方法的调用格式为：bind( type [, data] , fn );

bind() 方法有3个参数，说明如下。

第 1 个参数是事件类型，类型包括： blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、 mouseenter、mouseleave、change 、select、submit、keydown、keypress、keyup 和 error 等，当然也可以是自定义名称。

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

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

注意：可以发现，jQuery 中的事件绑定类型比普通的 javascript 事件绑定类型少了“on”。例如鼠标单击事件在 jQuery 中对应的是 click() 方法，而在 JavaScript 中对应的是 onclick()。

1. 基本效果

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

假设网页中有一个 FAQ，单击“标题”链接将显示内容。

html 代码如下：

<div id="panel"> ，
    <h5 class="head">什么是 jQuery</h5>
    <div class="content">
       jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig创建于2006年1月的开源项目。
       jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发人员遍历HTML文档、操作D0M、处理事件、执行动画和开发Ajax。
       它独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。
    </div>
</div>

我们可以轻易的写下如下代码：

$(function(){
    $("#panel h5 .head").bind("click",function(){
        $(this).next().show()； // $(this).next(); 获取”内容”元素
    })
})

在上面的例子中，为"标题"绑定了一个click事件，单击标题链接后，显示“内容”。与 ready() 方法一样，bind() 方法也可以多次调用。上面 jQuery 代码中有一个关键字 this，与在 JavaScript 中的作用一样，this 引用的是携带相应行为的DOM元素。为了使该 DOM元素能够使用 jQuery 中的方法，可以使用 $(this) 将其转换为 jQuery 对象。

2.加强效果

在上面的例子中，单击“标题”显示出“内容”；再次单击“标题”，“内容”并没有任何反应。 现在需要加强效果：第2次单击“标题”，“内容”隐藏；再次单击“标题”，“内容”又显示，两个动作循环出现。

为了判断元素是否显示，可以使用jQuery中的 is() 方法来完成。jQuery代码如下：

$(function(){
    $("#panel h5.head").bind("click",function(){
        var $content = $(this).next();
        if($content.is(":visible")){
            $content.hide();       // 等同于 $(this).next().hide();
        }else{
            $content.show();       // 等同于 $(this).next().show();
        }
    })
})

注意：当发现相同的选择器在你的代码里出现多次时，请用变量把它缓存起来。在上面代码中，发现 $(this).next() 被多次使用，因此可以为它定义一个局部变量： var $content = $(this).next(); 然后把局部变量引入到代码中。

通过以上的修改，可以实现加强效果。当反复地单击“标题”链接时，“内容”会在隐藏和显示两种状态下切换。

3.改变绑定事件的类型

上面的例子中，给元素绑定的事件类型是click，当用户单击的时候会触发绑定的事件，然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout，即当光标滑过的时候，就触发事件。需要进行以下几步操作。

写出如下jQuery代码：

$(function(){
    $("#panel h5.head").bind("mouseover",function(){
         $(this).next().show();
    }).bind("mouseout",function(){
         $(this).next().hide();
    })
})

代码运行后，当光标滑过“标题”链接后，相应的“内容”将被显示。

在上面几个例子中，分别用bind() 方法给“标题”绑定了 click 事件、mouseover 事件和 mouseout 事件，绑定方法都一样。除此之外，bind() 方法还能绑定其他所有的 JavaScript 事件。

4.简写绑定事件

像 click、mouseover 和 mouseout 这类事件，在程序中经常会使用到，jQuery为此也提供了一 套简写的方法。简写方法和 bind() 方法的使用类似，实现的效果也相同，惟一的区别是能够减少代码量。

例如把上面的例子改写成使用简写绑定事件的方式，代码如下：

$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
    }).mouseout(function(){
        $(this).next().hide();
    })
})