JQuery(四)-优快云博客

本文详细介绍了jQuery中的事件处理方法，包括bind、one、trigger等函数的使用方式与示例，并展示了如何通过这些方法来增强网页交互性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件处理

1．bind(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。type (String)事件类型，data (Object)(可选) 作为event.data属性值传递给事件对象的额外数据对象，fn ( Function)绑定到每个匹配元素的事件上面的处理函数

示例1：当每个段落被点击的时候，弹出其文本。

        $("p").bind("click", function(){
             alert( $(this).text() );
        });

示例2：在事件处理之前传递一些附加的数据。

        function handler(event) {
           alert(event.data.foo);
        }
        $("p").bind("click", {foo: "bar"}, handler)

2．one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。type (String)事件类型，data (Object) (可选) 作为event.data属性值传递给事件对象的额外数据对象，fn (Function)绑定到每个匹配元素的事件上面的处理函数

示例：当所有段落被第一次点击的时候，显示所有其文本。

        $("p").one("click", function(){
        alert( $(this).text() );
        });

3．trigger(type,[data]) 在每一个匹配的元素上触发某类事件。type (String) 要触发的事件类型，data (Array)(可选)传递给事件处理函数的附加参数

示例1：提交第一个表单，但不用submit()

$("form:first").trigger("submit")

示例2：给一个事件传递参数

$("p").click( function (event, a, b) {
         // 一个普通的点击事件时，a和b是undefined类型
      // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
       } ).trigger("click", ["foo", "bar"]);

示例3：下面的代码可以显示一个"Hello World"

$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

4．triggerHandler(type,[data]) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作. type (String)要触发的事件类型，data (Array) (可选)传递给事件处理函数的附加参数

示例：如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。

Html代码：

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>

$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

5．unbind([type],[data]) bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。type (String) (可选) 事件类型，data (Function)(可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例1：把所有段落的所有事件取消绑定

$("p").unbind()

示例2：将段落的click事件取消绑定

$("p").unbind( "click" )

示例3：删除特定函数的绑定，将函数作为第二个参数传入

   var foo = function () {
       // 处理某个事件的代码
       };

       $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

       $("p").unbind("click", foo); // ... 再也不会被触发 foo

操作案例：

$(function(){

// 1.绑定事件 01 bind(Type,[data],fn(){});

$("p").bind("click",function(){

$(this).css("background-color","pink");

});

/*绑定事件

2. 02 带参数的绑定方法：参数名aa（一般习惯通用foo作为参数名），参数值bar，实际参数str，获取传递的参数：实际参数.data.参数名*/

$("p").bind("click",{aa:"bar"},function(str){

alert(str.data.aa);

})

/* 3.传递多个参数 trigger(Type,[data]):在每一个匹配的元素上触发某类事件 $("p").bind("click",function(event,str1,str2){}).trigger("click",[参数值])与直接传参不调用trigger的不同在于调用trigger()方法不用触发事件直接执行，而按上述两种方法直接传递参数需要加载页面后再点击才执行此操作 */