javaScript在事件处理函数中默认传递了event对象,即事件对象,jQuery在封装时创建了一些非常好用的方法和属性。
event对象属性
属性名 | 描述 |
type | 获取这个事件的事件类型,例如click |
target | 获取绑定事件的DOM对象 |
data | 获取事件调用时的额外数据 |
relatedTarget | 获取移入移出目标点离开或进入的那个DOM元素 |
currentTarget | 获取冒泡前触发的DOM元素,等同于this |
pageX/pageY | 获取相对于页面原点的水平/垂直坐标 |
screenX/screenY | 获取显示器屏幕位置的水平/垂直坐标(非jQuery封装) |
clientX/clientY | 获取相对于页面视口的水平/垂直坐标(非jQuery封装) |
result | 获取一个相同事件的返回值 |
timeStamp | 获取事件触发的事件戳 |
which | 获取鼠标的左中右键(1,2,3)或获取键盘按键 |
altKey/shiftKey/ctrlKey/metaKey | 获取是否按下了alt、shift、ctrl(非jQuery封装)或meta键(IE原生meta键,jQuery做了封装) |
注意:1、
target是获取触发元素的DOM,触发元素就是你点哪个是哪个
currentTarget是获取监听元素的DOM,你绑定的哪个就是哪个
<div style="height:200px;width:200px;background:#eee;">
<span style="height:100px;width:100px;background:#ccc;display:block;"></span>
</div>
target:点击div区域时,弹出div,点击span区域时,弹出span
currentTarget:点击div区域时,弹出div,点击span区域时候,弹出div
relatedTarget:
$('span').mouseover(function(e){
alert(e.relatedTarget);
});
//表示移入span元素的临近元素
$('span').mouseout(function(e){
alert(e.relatedTarget);
});
//表示从span元素移出到的元素
2、data
获取额外数据,有四种形式:数字、字符串、数组、对象
3、$('input').click(function(){
return 123;});
$('input').click(function(e){
alert(e.result);});
//result获取相同事件的返回值
4、$('input').click(function(e){alert(e.timeStamp);});
5、$('input').mousedown(function(e){alert(e.which);});
二、冒泡和默认行为
冒泡行为:
<div style="height:200px;width:200px;background:red;">
<input type="button" value="按钮"/>
</div>
$('input').click(function(){alert("input");});
$('div').click(function(){alert("div");});
$(document).click(function(){alert("doc");});
阻止冒泡行为:e.stopPropagation();
阻止默认行为:e.preventDefault();
表单提交可以使用另外一种方法:$(‘form’).submit(function(){e.preventDefault();});
即阻止冒泡行为又阻止默认提交行为:return false;
冒泡和默认行为的一些方法
方法名 | 描述 |
preventDefault() | 取消某个元素的饿默认行为 |
isDefaultPrevented() | 判断是否调用了preventDefault()方法 |
stopPropagation() | 取消冒泡事件 |
isPropagationStopped() | 判断是否调用了stopPropagation()方法 |
stopImmediatePropagation() | 取消冒泡事件,并取消该事件的后续事件处理函数 |
isImmediatePropagation() | 判断是否调用了stopImmediatePropagation()方法 |