jquery事件绑定

Posted 2021-12-19 yehuan

一、静态绑定事件

如：在执行完bind()方法给所有button添加点击事件的操作后，又往页面动态添加了button元素，那么后来添加的button并没有前面添加的点击事件。

1.bind()方法 —— 静态绑定事件

jQuery 3.0中已弃用此方法，使用 on()方法代替。

$(selector).bind(events,[data],fn)

events: 含有一个或多个事件类型的字符串，由“空格”分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象（可省略）。

fn:绑定到每个匹配元素的事件上面的处理函数。

代码示例：

绑定多个事件但是操作一样，事件中间使用“空格”分隔。

$("form").bind("submit click", function(event)
    // 对应操作
);

绑定多个事件且操作不同，使用json。

$("form").bind(
    click:function(),
    mouseover:function()
);

 

2.unbind()方法 —— 解除事件绑定

$(selector).unbind()：解除所有事件

$(selector).unbind(type)：解除特定事件

$(selector).unbind(type,handler)：解除特定事件特定方法

type：时间类型字符串

handler：想要接触的方法

代码示例：

// 绑定事件
var fn1 = function()
var fn2 = function()
var fn3 = function()
$("form").bind(
    click:fn1,
    click:fn2,
    click:fn3
);
// 解除绑定
$("form").unbind("click",fn2);

结果：方法fn2被解除绑定，其他两个方法还在。

二、动态绑定事件

1.on()方法 —— 动态绑定事件

如：在执行完on()方法给所有button添加点击事件的操作后，又往页面动态添加了button元素，那么后来添加的button也有前面添加的点击事件。

$(selector).on(events,selector,data,fn);

events: 含有一个或多个事件类型的字符串，由“空格”分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

selector：一个选择器字符串，用于过滤触发事件的所选元素的后代。

data:作为event.data属性值传递给事件对象的额外数据对象（可省略）。

fn:绑定到每个匹配元素的事件上面的处理函数。

$(document).on("click",":button",function());

2.off()方法 —— 动态解绑事件

$(selector).off()：解绑所有事件

$(selector).off(events)：解绑特定事件（选择器由绑定时是否有决定）

$(selector).off(events,selector)：解绑特定事件（选择器由绑定时是否有决定）

$(selector).off(events,selector,handler)：解绑特定事件的特定方法