jQuery中事件处理
访问量:2698

在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');



请在下面输入需要执行的语句