大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
jquery基础事件,包括绑定事件、简写事件、复合事件;
成都做网站、网站制作、成都外贸网站建设的关注点不是能为您做些什么网站,而是怎么做网站,有没有做好网站,给创新互联一个展示的机会来证明自己,这并不会花费您太多时间,或许会给您带来新的灵感和惊喜。面向用户友好,注重用户体验,一切以用户为中心。
一.绑定事件
jQuery 通过.bind()方法来为元素绑定这些事件。
形式:
bind(type, [data], fn)
参数:
type 表示一个或多个类型的事件名字符串;
[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;
fn 表示绑定到指定元素的处理函数。
二、简写事件
为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。 称之为简写事件。简写事件,绑定方法如下图,
三、复合事件
jQuery 提供了许多最常用的事件效果, 组合一些功能实现了一些复合事件, 比如切换功 能、智能加载等。
扩展资料
1、绑定事件fn函数
1)使用点击事件
$('input').bind('click', function () {//点击按钮后执行匿名函数
alert('点击!');
});
2)普通处理函数
$('input').bind('click', fn); //执行普通函数式无须圆括号
function fn() {
alert('点击!');
}
2、简写事件函数
1).mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。
2).keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码。
3).focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。
3、复合事件示例,背景移入移出切换效果
$('div').hover(function () {
$(this).css('background', 'black'); //mouseenter 效果
}, function () {
$(this).css('background', 'red'); //mouseleave 效果,可省略
});
参考资料
jQuery官方网站-事件
jQuery绑定点击事件可以使用其绑定事件函数
jquery中四个事件绑定方式(bind,live,delegate,on)
1、bind()
简要描述
bind()向匹配元素添加一个或多个事件处理器。
使用方式
$(selector).bind(event,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).bind("click",data,function);
多事件处理:
1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独
绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
2、live()
简要描述
live() 向当前或未来的匹配元素添加一个或多个事件处理器;
使用方式
$(selector).live(event,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).live("click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。
3、delegate()
简要描述
delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.4.2及其以上版本;
4、on()
简要描述
on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).on(event,childselector,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).on("click",childselector,data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本
jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
四种方式的异同和优缺点
相同点:
1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以
用来代替live()函数,live()函数在1.9版本已经删除;
3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
总结
如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法
jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。
有时我们可能会像下面这样绑定一个事件:
复制代码 代码如下:
$("#div1").click(function() {
alert("点击后触发");
});
上面的事件绑定,我们可以通过多种方式去实现:
1. on()
复制代码 代码如下:
//无数据参数
$("p").on("click", function(){
alert( $(this).text() );
});
//有数据参数
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
与on()对应的是off(),用来移除事件绑定:
复制代码 代码如下:
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
off():移除on()进行的绑定
one():只绑定一次。
2. bind()
参数:
(type,[data],function(eventObject))
type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
(type,[data],false)
type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。
同时绑定多个事件类型:
复制代码 代码如下:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
同时绑定多个事件类型/处理程序:
复制代码 代码如下:
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
你可以在事件处理之前传递一些附加的数据。
复制代码 代码如下:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
复制代码 代码如下:
$("form").bind("submit", function() { return false; })
bind存在的问题
如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存(类似于让每个人亲自站在门口等快递)。
在前面这个例子的基础上,如果我们想实现一个简单的相册应用,每页只显示50张照片的缩略图(50个单元格),用户点击“第x页”(或“下一页”)链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下,似乎使用.bind()方法为50个单元格绑定事件又可以接受了。
事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件,动态加载的后续页面中的单元格都不会有这个单击事件。换句话说,.bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件(类似于新来的员工收不到快递)。
事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可:
复制代码 代码如下:
$("#info_table td").live("click",function(){/*显示更多信息*/});
这里的.live()方法会把click事件绑定到$(document)对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)绑定一次(不是50次,更不是5000次),然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时,$(document)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。
unbind():移除bind进行的绑定。
3. live()
到目前为止,一切似乎很完美。可惜,事实并非如此。因为.live()方法并不完美,它有如下几个主要缺点:
$()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;
收集td元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。
解决之道
为了避免生成不必要的jQuery对象,可以使用一种叫做“早委托”的hack,即在$(document).ready()方法外部调用.live():
复制代码 代码如下:
(function($){
$("#info_table td").live("click",function(){/*显示更多信息*/});
})(jQuery);
在此,(function($){...})(jQuery)是一个“立即执行的匿名函数”,构成了一个闭包,可以防止命名冲突。在匿名函数内部,$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意,使用这个hack时,脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机,因为这时候刚好document元素可用,而整个DOM还远未生成;如果把脚本放在结束的body标签前面,就没有意义了,因为那时候DOM已经完全可用了。
为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:
复制代码 代码如下:
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});
这样,“受托方”就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。不过,与.live()共同使用的上下文参数必须是一个单独的DOM元素,所以这里指定上下文对象时使用的是$("#info_table")[0],即使用数组的索引操作符来取得的一个DOM元素。
4. delegate()
如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
使用.delegate(),前面的例子可以这样写:
复制代码 代码如下:
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
使用.delegate()有如下优点(或者说解决了.live()方法的如下问题):
直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;
支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;
可见,.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下,也可以使用.live()。
提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。
undelegate(): 移除delegate的绑定
用jquery写一个事件的操作如下:
1、用confirm输入以下代码:
if(confirm("确定要删除数据吗"))
{
}else{
}
2、用组件jBox(需要下载jquery.jBox-2.3.min.js,并引入)
$.jBox.confirm("您确定要删除此委托吗?", "提示", function(v, h, f)
{
if (v == "ok")
{
}else{
}
});
1、新建一个静态页面bind.html,并引入jquery核心文件。
2、在body/body标签中,插入一个button按钮,添加id属性值。
3、在script/script标签中,添加按钮点击事件,利用on()方法绑定。
4、保存代码并运行项目,打开浏览器查看界面效果,点击按钮查看控制台。
5、将on()方法改为bind()方法,然后保存代码,点击按钮查看打印结果。
6、在jQuery3.0以下版本中,可以使用delegate()方法绑定点击事件。
7、除了上述之外,还有live()方法,不过这个方法jQuery1.7后就被废弃了。