jQuery 事件--事件处理/事件委派

最新推荐文章于 2023-01-07 11:07:03 发布

三知之灵

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量1.8k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/tjj3027/article/details/79240210

版权

JQuery 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

事件处理/事件委派

事件处理

方法

方法	概述
on(events,[selector],[data],fn)	用于为指定元素的一个或多个事件绑定事件处理函数。
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data	fn]])
one(type,[data],fn)	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
off(events,[selector],[fn])	在选择元素上移除一个或多个事件的事件处理函数。
trigger(type,[data])	在每一个匹配的元素上触发某类事件。
triggerHandler(type, [data])	这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

说明
on(events,[selector],[data],fn)/.on( eventsMap [, selector ] [, data ] )：
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

参数events,[selector],[data],fn：

events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
selector:一关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

参数events-map,[selector],[data]：

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector:关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。
data:当一个事件被触发时要传递event.data给事件处理函数。

如果传递了selector参数，那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(document.body).on("click", "p", handler);

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，”告诉”他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意：”focus”、”blur”等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与”focus”对应的”focusin”，与”blur”对应的”focusout”。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

on()函数的参数eventsMap是一个对象，可以”属性-值”的方式指定多个”事件类型-处理函数”。对应的示例代码如下：

var data = { id: 5, name: "张三" };

var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },

    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};

//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);

bind()的参数形式:
bind()函数的返回值为jQuery类型，返回当前jQuery对象本身。
参数type,[data],function(eventObject) (String,Object,Function):

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如”click”或”submit”，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数

参数type,[data],isDefaultBubble ( String,Object,bool):

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如”click”或”submit”，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
isDefaultBubble: 可选/Boolean类型指定触发事件时，是否允许元素的默认行为和事件冒泡。默认为true。将第三个参数设置为false会使默认的动作失效。

参数eventsMap（Object）

Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

bind()函数的参数eventsMap是一个对象，可以”属性-值”的方式指定多个”事件类型-处理函数”。对应的示例代码如下：

var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },

    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};

//为n5绑定mouseenter mouseleave两个事件
$("#n5").bind( eventsMap );

执行bind()时，事件处理函数会绑定到每个匹配元素上。因此你使用bind()所有button元素绑定了click事件，是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素，绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效，请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。

此外，你可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过bind()绑定的事件，请使用unbind()函数。

unbind():函数主要用于解除由bind()函数绑定的事件处理函数。

unbind()函数的返回值为jQuery类型，返回当前jQuery对象本身。

unbind()的2种调用形式：

.unbind( [ events [, handler ]] )
移除当前匹配元素的events事件绑定的事件处理函数handler。
.unbind( eventObject )
为指定事件处理函数传入的Event对象，用于移除对应的事件处理函数。

参数	说明
events	可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
handler	可选/Function类型指定的事件处理函数。
eventObject	Object类型一个Event对象，用于移除传入该对象的事件处理函数。

如果省略参数handler，则移除匹配元素指定类型的事件上绑定的所有事件处理函数。

如果省略了所有参数，则表示移除匹配元素上为任何元素绑定的任何事件类型的任何事件处理函数。

实际上，unbind()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数都将被移除。参数越多，限定条件就越多，被移除的范围就越小。

举例
HTML

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

script

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.foo.bar", function btnClick1(){
    alert( "click-1" );
} );

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.test.bar", function btnClick1(){
    alert( "click-2" );
} );

// 移除包含命名空间foo的click事件绑定的事件处理函数
$buttons.unbind( "click.foo" ); // 移除click-1

//移除包含命名空间bar的click事件绑定的事件处理函数
// $buttons.unbind( "click.bar" ); // 移除click-1和click-2

//移除包含命名空间test的click事件绑定的事件处理函数
// $buttons.unbind( "click.test" ); // 移除click-2

// 移除所有button元素的click事件绑定的所有事件处理函数
// $buttons.unbind("click"); // 移除click-1和click-2

one()：

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

one()的几种调用形式：

.one( events [, data ], handler ) V1.1
.one( events , selector [, data ], handler ) V1.1
.one( eventsMap [, selector ] [, data ] ) V1.7

参数	说明
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
data	Object类型可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型指定的事件处理函数。
selector	String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。

要删除通过one()绑定的事件，请使用unbind()或off()函数。

关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

如果当前元素有多个匹配selector的后代元素，其中只要有任意一个后代元素触发执行了事件处理函数，就会移除当前元素上的事件绑定，当前元素内符合条件的其他后代元素就无法再次触发执行。

HTML代码

<input id="btn" type="button" value="点击" />
<div id="n1">
    <p id="n2">段落文本内容1</p>
    <p id="n3">段落文本内容2</p>
    <span id="n4">隐藏关卡</span>
</div>
<div id="n5">
    <p id="n6">段落文本内容3</p>
    <p id="n7">段落文本内容4</p>
</div>
<p id="n8">专注于编程开发技术分享</p>

Script代码:

// 在n1元素上为所有后代p元素的click事件绑定事件处理函数
// 只有n2、n3可以触发该事件
$("#n1").one("click", "p", function(event){
    alert( $(this).text() );
});

//新添加的n9也可以触发上述click事件，因为它也是n1的后代p元素
$("#n1").append('<p id="n9">上述绑定的一次性click事件也会对该元素也生效!</p>');

注意：虽然下面的jQuery代码是为n1元素的所有后代p元素绑定click事件，但事件处理函数本身是绑定在n1元素上的，后代p元素的click事件是委托给n1元素来处理的。只要n2、n3、n9中任意一个触发了click事件，就会移除body元素上绑定的事件处理函数。也就是说，n2、n3、n9总共只能执行一次该事件处理函数。

off():

off()的2种调用形式：

.off( [ events [, selector ] [, handler ] ] )
..off( eventsMap [, selector ] )

参数	说明
events	可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
handler	可选/Function类型指定的事件处理函数。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。
如果省略参数selector，则移除为任何元素绑定的事件处理函数。
参数selector必须与通过on()函数添加绑定时传入的选择器一致。
如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。
如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

HTML代码

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

Script代码:

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元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接，都不会触发执行任何事件处理函数
// $("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事件

trigger()：

trigger()的2种调用形式：

.trigger( events [, extraArguments ] )
在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。
.trigger( eventObject [, extraArguments ] )
为指定事件处理函数传入的Event对象(eventObject)，用于触发执行对应的事件处理函数，并可为事件处理函数传入额外的参数(extraArguments)。

参数	说明
events	可选/String类型指定的事件类型和可选的命名空间，例如”click”、 “focus”、 “keydown.myPlugin”。
extraArguments	可选/Object类型为事件处理函数传入的额外参数。如果要传入多个参数，请以数组方式传入。
eventObject	Object类型一个Event对象，用于触发传入该对象的事件处理函数。

trigger()函数会为触发执行的事件处理函数传入一个默认参数，也就是表示当前事件的Event对象。

HTML代码

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

Script代码:

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

function handler( event, arg1, arg2 ){
    var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );

// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/

$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/

// arg1 = "张三"， arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/

$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/

trigger()函数还可以只触发包含指定定命名空间的事件(1.4.3+才支持命名空间)。

function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

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

// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );

// 触发btn1的click事件，不限定命名空间
$btn1.trigger("click"); // 触发A、B、C

// 触发btn1的包含命名空间foo的click事件
$btn1.trigger("click.foo"); // 触发A、B

// 触发btn1的包含命名空间test的click事件
$btn1.trigger("click.test"); // 触发B、C

// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.trigger("click.foo.test"); // 触发B

命名空间的顺序不影响事件的触发（click.foo.test？）

triggerHandler():函数用于在每个匹配元素上触发指定类型的事件。
triggerHandler()的调用形式：

.triggerHandler( events [, extraArguments ] )：在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。

参数	说明
events	可选/String类型指定的事件类型和可选的命名空间，例如”click”、 “focus”、 “keydown.myPlugin”。
extraArguments	可选/Object类型为事件处理函数传入的额外参数。如果要传入多个参数，请以数组方式传入。

该函数的作用于trigger()函数相似，但triggerHandler()函数具有以下例外情况：

triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)。
triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。
triggerHandler()触发的事件不会在DOM树中冒泡，因此事件不会冒泡传递到它的任何祖辈元素。
triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身。

该函数属于jQuery对象(实例)。

HTML代码

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

Script代码:

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

function handler( event, arg1, arg2 ){
    var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );

// 触发btn1的click事件
// 虽然$buttons匹配两个button元素，但只会触发第一个匹配元素的click事件
$buttons.triggerHandler("click");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
*/

$("#btn2").triggerHandler("click", "CodePlayer");
/*(追加文本)
触发元素#btn2的[click]事件，额外的函数参数为:CodePlayer, undefined
*/

// arg1 = "张三"， arg2 = 20
$("a").triggerHandler("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/

$("a").triggerHandler("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/

事件委派

方法

方法	概述
live(type, [data], fn)	jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
die(type, [fn])	从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
delegate(selector,[type],[data],fn)	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
undelegate([selector,[type],fn])	删除由 delegate() 方法添加的一个或多个事件处理程序。

说明

live()：函数用于为指定元素的一个或多个事件绑定事件处理函数。

即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。

要删除通过live()绑定的事件，请使用die()函数。

jQuery 1.3 新增该函数，从jQuery 1.7开始被标记为已过时，在jQuery 1.9中被移除。请使用on()函数来替代。即使在1.7版本之前，也强烈不推荐使用该函数。如果能够不使用该函数，就不要使用。

die()：函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。

主要用于解除由live()函数绑定的事件处理函数。

jQuery 1.3 新增该函数，从jQuery 1.7开始被标记为已过时，在jQuery 1.9中被移除。

delegate():函数用于为指定元素的一个或多个事件绑定事件处理函数。

即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。

要删除通过delegate()绑定的事件，请使用undelegate()函数。

该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

从jQuery 1.7开始，请优先使用事件函数on()替代该函数。

triggerHandler()的调用形式：

.delegate( selector , events [, data ], handler )：在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。
即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。
.delegate( selector, eventsMap )：在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。
即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。

参数	说明
selector	String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型指定的事件处理函数。参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
eventsMap	可选/Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

重要说明：delegate()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。delegate()函数并不是直接为这些后代元素挨个绑定事件，而是”委托”给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

HTML代码

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

即使符合条件的元素是delegate()函数执行后新添加，绑定事件对其依然有效。

//为div中的所有p元素绑定click事件处理程序
//只有n2、n3可以触发该事件
$("div").delegate("p", "click", function(event){
    alert( $(this).text() );
});

//后添加的n6也可以触发上述click事件，因为它也是div中的p元素
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

unction clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}

var $p = $("p");

// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$("body").delegate( "p", "click.foo.bar", clickHandler );

// B：为所有p元素绑定click事件，定义在test命名空间下
$("body").delegate( "p", "click.test", clickHandler );

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

// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")

// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")

// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")

// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.undelegate( "click.foo" ); // 移除A

delegate()函数的参数eventsMap是一个对象，可以”属性-值”的方式指定多个”事件类型-处理函数”。对应的示例代码如下：

var events = {
    "mouseenter": function(event){
        $(this).html( "你好!");       
    },

    "mouseleave": function(event){
        $(this).html( "再见!");
    }
};

//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").delegate("#n5", events);

三知之灵

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 事件--事件处理/事件委派

事件处理/事件委派事件处理方法方法概述 on(events,[selector],[data],fn) 用于为指定元素的一个或多个事件绑定事件处理函数。 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。 unbind(type,[data fn]]) one(type,[data],fn)
复制链接

扫一扫