事件对象



一、事件对象

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()方法