博前“废话”
这篇总结拖了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()方法 |