事件处理（二）：使用事件对象、触发事件、切换事件、悬停事件、事件命名空间、自定义事件

使用事件对象
使用on()、bind()等方法注册事件时，在参数function中添加参数event，可以在函数中使用event对象的属性和方法
常见的属性：
type：获取事件的类型，返回值为事件类型的名称
data：存储事件处理函数第二个参数所传递的额外数据

触发事件
触发事件是因为，在很多情况下，开发人员需要在脚本中控制事件出发的机制。
例如，设计一个弹出广告，尽管提供了关闭广告的按钮，但是也应该设计一个条件，控制广告在显示3秒钟之后自动关闭
在传统表单设计中，表单域元素都拥有focus()和blur()方法，调用它们将会直接调用对应的focus和blur事件处理函数，使文本域获取焦点或者失去焦点
jQuery中最常用的方法是trigger()方法

trigger(type,[data])

参数type表示事件类型，以字符串形式传递；参数data是可选参数，可以向调用的事件处理函数传递额外的数据

例：单击时触发事件处理程序，鼠标移动过段落文本时自动触发鼠标单击事件

$('li').click(function() {
	//alert(this.innerText)
	alert($(this).text())
})
$('li').mouseout(function() {
	$(this).trigger('click')
})

triggerHandler()是对trigger()方法的补充，主要有一些3个区别：

• 该方法不会触发浏览器的默认事件
• 该方法只触发jQuery对象集合中第一个元素的事件处理函数
• 该方法返回的是事件处理函数的返回值，而不是jQuery对象。如果最开始的jQuery对象集合为空，则这个方法返回undefined

除了trigger()和triggerHandler()方法外，还提供了如下快捷触发的方法：

blur()         dblclick()         keydown()        select()     change()       error()            keypress()       
submit()       chilck()           focus()          keyup()

例如：

$('li').click(function() {
	//alert(this.innerText)
	alert($(this).text())
})
$('li').mouseout(function() {
	$(this).click()
})

切换事件
toogle() 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件

toggle([speed],[easing],[fn])

可选参数speed：表示隐藏或显示效果的速度，默认是0毫秒，可以输入数字或者slow、normal、fast三个可选值
可选参数easing：用来指定切换效果，默认为swing，可选值有linear
可选参数fn：定义在动画完成时执行的函数，每个元素执行一次

例：使用按钮动态控制文本的显示与隐藏

<p>切换事件</p>
<button>控制按钮</button>
<script type="text/javascript">
	$('button').click(function(){
		$('p').toggle(100)
	});
</script>

注：
1、可以为toggle()方法传递true或者false；true表示显示，false表示隐藏
2、与toggleClass()进行区别，toggleClass是用来显示和隐藏指定的类样式的

悬停事件
hover() 可以模拟悬停事件，即鼠标指针引动到一个对象上面及移除这个对象的方法，它为频繁使用的任务提供了一种保持在其中的状态。推荐使用该方法来代替mouseout和mouseover事件。mouseout事件存在严重的错误，如果鼠标指针移动到当前元素包含的子元素上时，将触发当前元素的mouseout和mouseover事件

hover([fn],[fn])

第一个参数表示鼠标移到元素上要触发的函数，第二个参数是鼠标移出元素时要触发的函数

例：

$('div').hover(function(event){
	alert(event.type)
},function(){
	alert("出来了")
})

注：
1、需要使用event对象中的属性时，可以在函数中添加event参数，如果用不到可以不写
2、两个参数都是可选参数，可以一个也不写；没有参数时无任何效果；可以只写第一个，但不能只写第二个

事件命名空间
所谓事件命名空间，就是在事件类型后面以点语法附加一个别名，以便于引用事件，如click.a，其中a就是click当前事件类型的别名
例：使用事件别名来删除事件

$(function(){
	$('div').bind('click.a',function(){
		$('body').append("<p>click.a事件</p>")
	})
	$('div').bind('dblclick.a',function(){
		$('body').append("<p>click.a事件</p>")
	})
	$('div').bind('click.b',function(){
		$('body').append("<p>click.b事件</p>")
	})
	$('button').unbind('.a')
})

事件命名不区分是否是相同事件还是不同事件；如果所有事件的命名都相同，注销事件时使用命名空间可以注销所有该命名的事件；也可以使用不同的命名，使用时只需要指定相应的命名

自定义事件
jQuery支持自定义事件，所有自定义事件都可以通过trigger()方法触发

例：自定义delay事件类型，并把他绑定到input元素对象上。然后再按钮点击事件中触发自定义事件，以实现延迟相应的设计效果

<input type="button" value="自定义事件" />
<script type="text/javascript">
	$(function() {
		$('input').bind('delay', function(event) {
			setTimeout(function() {
				alert(event.type)
			}, 1000)
		});
		$('input').click(function() {
			$('input').trigger('delay')
		})
	})
</script>