在jQuery中,对Javascript事件处理方法进行了封装,同时对事件对象Event也进行了规范化处理,开发者不需要再考虑兼容性问题。在jQuery中关处理事件主要函数有on()/off()、bind()/unbind()、delegate()/undelegate()、one()、trigger()等,关于每个事件的含义,不在这里详解,可以点击查看手册,下面我们主要来看看jQuery中事件方法的使用,不同类型的事件操作方式大致相同,我们主要从点击事件操作学起。
一、添加点击事件
为id为footer的元素添加一个点击事件,实现程序有如下:
//方式一 $("#footer").click(function(){ //业务处理 }); //方式二 $("#footer").on('click', function(){ //业务处理 }); //方式三 $("#footer").bind('click', function(){ //业务处理 //在jQuery 3.0中,.bind()已被标记为弃用。 }); //方式四 /* *在jQuery 3.0中,.delegate()已被标记为弃用。从jQuery 1.7开始,它已经被.on()方法取代。所以我们不建议使用该方法。 */ $("#footer").delegate('li', 'click', function(){ //业务处理 }); //方式五 /** * 添加的事件,只会被触发执行一次,之后不会再执行 */ $( "#footer" ).one( "click", function() { //业务处理 });
由于一些方法已经被标记为弃用或是过时,在使用jQuery3.2时,我们主要掌握on方法以及one方法即可。有的时候,我们会遇到新增的元素,无法响应绑定的事件问题。比如在页面中,已经设置了$(".news").click(functin(){});,但当我们新增一个class为new的元素时候,该元素上面将没有绑定任何事件。若让新增的元素也能响应之前绑定的事件,可将事件绑定到其父类元素(#newsList)上,如下:
$("#newsList").on('click','.news', function(){});
二、程序触发点击事件
有的时候,为了便于调试或是某种需求,我们往往通过程序触发某个事件的执行,而不是等待事件的触发。要触发绑定到id为footer元素上的点击事件,有以下方式:
//方式一 $('#footer').trigger('click'); //方式二 $('#footer').triggerHandler('click'); //方式三 $("#footer").click();
trigger方法与triggerHandler方法区别:①trigger方法触发的是元素集合中所有对象的方法,而triggerHandler仅仅触发第一个元素的相应方法。②triggerHandler方法,不会向上冒泡。③triggerHandler( "event" )方法被触发时不会调用元素上的 .event()。更多的信息,可以点击这里。
三、取消绑定的点击事件
在jQuery3.2中,通过off取消绑定的事件,如要取消绑定到id为footer元素上的点击事件。程序如下:
$("#subNav").off('click');
若您感觉本站文章不错,读后有收获,不妨赞助一下?
我要赞助