JQuery 基础 jQuery事件模型一

jQuery 事件模型

- 提供了统一的事件处理方法（没有兼容性烦恼）

- 允许添加多个事件处理函数（采用 DOM 2级事件处理方式）

- 使用标准的事件名称（不带on）

- 事件实例做为事件处理函数的第一个参数

- 标准化事件实例最常用的属性

- 提供了统一的事件取消和阻止行为的标准

添加事件处理

- on(eventType[,selector][,data],handler)

eventType: 事件名称（可以是一个，也可以多个，用空格）

selector: 选择器（事件委托时会需要使用）

data: 传递一些数据给数据处理函数，可以在事件处理函数中，事件实例 event 的data 属性中获得

handler: 事件需要触发的事件处理函数

示例：

<script type="text/javascript">
	$(function(){
		$('p').on('click',null,null,function(event){
			console.log('p.click');
		});

		$('p').on('click',function(event){
			console.log('p.click');
		}).on('click',function(event){
			console.log('p.click2');
		});

		$('div').on('click','#p1-1',function(event){
			console.log('div.p1-1')
		});

		$('div').on('click','#p1-1-1',{foo:'bar'},function(event){
			console.log('data is %o',event.data);
		});

		$('div').on('mouseover','#p1-1-1',{foo:'bar'},function(event){
			console.log('data is %o',event.data);
		});

	});
</script>

事件委托：

 将事件绑定在父元素上，然后使用event.target 来判断其子元素。(可以提升程序的性能、降低复杂度)

<script type="text/javascript">
	$(function(){
		// 第一种方式
		// $('li').on('click',function(event){
		// 	console.log('%o li clicked',$(this));
		// });

		// 第二种方式
		$('ul').on('click',function(event){
			console.log('%o clicked',$(event.target));
			// if(event.target)
		});
	});
</script>

统一方法和属性

 - 阻止冒泡：stopPropagation()

 - 阻止默认行为：preventDefault()

 - 阻止冒泡和默认行为： return false

<script type="text/javascript">
	$(function(){
		$('p').on('click',function(event){
			event.stopPropagation();
			console.log('%o clicked',$(this));
		});
	});
</script>

JQuery 所有支持的事件

 - blur

 - change

 - click

 - dblclick

 - error

 - focus

 - focusin

 - focusout

 - keydown

 - keypress

 - keyup

 - load

 - unload

 - mousedown

 - mouseenter

 - mouse leave

 - mousemove

 - mouseout

 - mouseover

 - mouseup

 - ready

 - resize

 - scroll

 - select

 - submit 

一次性的事件处理

只会执行一次，此后将不再执行

- one(eventType[,selector][,data],handler)

移除事件（移除该dom 的所有事件）

 - off(eventType[,selector][,handler])

示例1：

<script type="text/javascript">
	$(function(){
		$('p').off('click');
	})
</script>

示例2:

<script type="text/javascript">
	// $(function(){
	// 	$('p').off('click');
	// })

	var click2 = function(){
		console.log('click2');
	};

	$('p').on('click',function(){
		console.log('click1');
	}).on('click',click2);
    
    // 只删除一个指定事件 
	$('p').off('click',click2);
</script>

示例3:

<script type="text/javascript">
	$('p').on('click',function(){
		console.log('click1');
	}).on('mouseover',function(){
		console.log('mouseover')
	});

	// 删除所有事件
	// $('p').off()

	// 删除多个事件
	$('p').off('click mouseover');
</script>