jQuery事件处理

博前“废话”

这篇总结拖了3天才写，主要是最近的事情太多了，今天决定补上。前面总结到jQuery的选择器、DOM操作，大都讲的是对元素标签的增删改查进行研究。既然能将内容显示页面，那么我们就可以给这些元素添加事件。

什么是jQuery事件处理？

就是用户对页面上操作(如点击、拖动等)某个组件，然后该组件做出响应。其实在学习JavaScript时，我们以及学到了许多事件：click、change、select、focus等

常用的事件处理

jQuery中的事件有太多太多了，这里就不一一总结了。这里只列出常见的事件。

方法	描述	示例
.bind(type,[data],fn)	给元素绑定事件，type:一个或多个类型的时间名。[data]:event.data属性值传递的额外的数据，可选。fn:绑定到指定元素的处理函数。	$(‘input’).bind(‘click’,function(){alert(“点击事件”)})
.unbind([type])	删除绑定事件，type:可以选，若无type，则删除所有当前元素的事件，反之，删除当前元素的type事件	$(‘input’).unbind(‘click’)
.click(fn)	为了方便操作直接简写，鼠标点击事件	$(‘input’).click(function(){alert(‘点击事件’)})
.dbclick(fn)	为了方便操作直接简写，鼠标双击事件	$(‘input’).dbclick(function(){alert(‘双击鼠标事件’)})
.ready(fn)	当DOM加载完毕触发事件	$(document).ready(function(){alert(‘DOM加载完毕之后，可以做自己想做的事了’)})
.hover([fn1,]fn2)	当鼠标移入触发fn1,移出触发fn2	$(‘div’).hover(function(){alert(‘干第一件事’)}，function(){alert(‘干第二件事’)});

事件对象

我们知道在JavaScript的事件处理函数中传递了event对象，即事件对象。既然是对象那我们首先想到的是它有些什么属性，总结如下：

属性名	描述
type	获取事件的类型
target	获取绑定事件的DOM元素
data	获取事件调用时的额外数据
result	获取上一个相同事件的返回值
timeStamp	获取事件触发的时间戳
relatedTarget	获取移入移出目标点离开或进入的那个DOM元素
currentTarget	获取冒泡前触发的DOM 元素，等同与this
pageX/pageY	获取相对于页面原点的水平/垂直坐标
screenX/screenY	获取显示器屏幕位置的水平/垂直坐标(非jQuery 封装)
which	获取鼠标的左中右键(1,2,3)，或获取键盘按键
clientX/clientY	获取相对于页面视口的水平/垂直坐标(非jQuery 封装)

冒泡问题

JavaScript的事件处理流程:捕捉焦点——>处理——>冒泡回退。换句话说，如果在页面重叠了多个元素，并且重叠的这些元素绑定了统一事件，那么就会出现冒泡问题。
示例:

<div style="height:150px;width:120px;background:green">
<input type="button" value="按钮">
</div>

<script>
$(function(){
$('input').click(function(){alert("按钮被触发")});
$('div').click(function(){alert("div层被触发")});
$(document).click(function(){alert("文档页面被触发")});
})
</script>

当点击按钮时：按钮、div层、文档页面都被触发。当点击div层是：div层、文档页面被触发。当点击文档页面时：文档页面被触发。—整个过程就被称为冒泡行为。
那我们要怎么阻止这种冒泡行为呢？提供了如下方法：

方法	描述
preventDefault()	取消某个元素的默认行为(如点击超链接时，它会自动跳转到指定的页面)
isDefaultPrevented()	判断是否调用了preventDefault()方法
stopPropagation()	取消事件冒泡
isPropagationStopped()	判断是否调用了stopPropagation()方法
stopImmediatePropagation()	取消事件冒泡，并取消该事件的后续事件处理函数
isImmediatePropagationStopped()	判断是否调用了stopImmediatePropagation()方法