jQuery事件绑定

一、静态绑定事件

如：在执行完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){    alert(event.data); // 获得参数// 其他操作
});

绑定多个事件且操作不同，使用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)：解绑特定事件的特定方法

转载于:https://www.cnblogs.com/YeHuan/p/10974664.html

jQuery事件绑定相关推荐

JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jquery事件绑定和解除绑定bind、unbind、one
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery事件绑定使用函数bind(type [,data],fn)绑定事件,one函数也可以进行一次绑定,但是需要注意b ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...
jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
1、jquery事件绑定和委托的实现
jQuery的事件绑定和委托可以使用 on().one().bind().live().delegate()等方法实现. 1.on() : 语法:$(selector).on(event,child ...
jquery事件绑定解绑机制源码分析
引子为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
wpf checkbox选中触发事件_Web前端开发(16)——JQuery事件绑定与插件
事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 比如给name绑定点击事件: $("#name").click(function () { alert(&q ...

jQuery事件绑定

jQuery事件绑定相关推荐

最新文章

热门文章