带你了解jQuery.off() 函数的详细用法

function btnClick1(){

    alert( this.value + "-1" );

}

function btnClick2(){

    alert( this.value + "-2" );

}

var $body = $("body");

// 为所有button元素的click事件绑定事件处理函数btnClick1

$body.on("click", ":button", btnClick1 );

// 为所有button元素的click事件绑定事件处理函数btnClick2

$body.on("click", ":button", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件

$body.on("click mouseover mouseleave", "a", function(event){

    if( event.type == "click" ){

        alert("点击事件");

    }else if( event.type == "mouseover" ){

        $(this).css("color", "red");

    }else{

        $(this).css("color", "blue");       

    }

});

// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2

// 点击按钮，btnClick1照样执行

$body.off("click", ":button", btnClick2);

// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)

// 点击按钮，不会执行任何事件处理函数

// $body.off("click", ":button");

// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。

// 点击按钮或链接，都不会触发执行任何事件处理函数

// $("body").off("click");

// 移除body元素为所有元素的任何事件绑定的所有处理函数

// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数

// $("body").off( );

运行代码(其他代码请自行复制到演示页面运行)

此外off()函数还可以只移除指定命名空间的事件绑定。

var $btn1 = $("#btn1");

$btn1.on("click.foo.bar", function(event){

    alert("click-1");

});

$btn1.on("click.test", function(event){

    alert("click-2");

});

$btn1.on("click.test.foo", function(event){

    alert("click-3");

});

$btn1.off("click.test"); // 移除click-2、click-3

// $btn1.off("click.foo");  // 移除click-1、click-3

// $btn1.off("click.foo.bar");  // 移除click-1

// $btn1.off("click");  // 移除所有click事件处理函数(click-1、click-2、click-3)

// $btn1.off(".foo");  // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件

Atas ialah kandungan terperinci 带你了解jQuery.off() 函数的详细用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!