jQuery学习笔记6 - Event对象的属性和方法

发表于   |   分类于   |     |   阅读次数

jQuery Event对象的属性和方法

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。
jQuery的Event对象用于表示当前文档元素触发的DOM事件，它对JS原生的Event对象进行了封装，从而实现跨浏览器的兼容。

该对象主要用于获取事件的相关信息，或对该事件进行处理。

Event 对象的属性

属性 初始版本 描述
currentTarget 1.3 返回事件冒泡阶段中的当前DOM元素。
data 1.1 返回绑定事件时传入的附加数据。
delegateTarget 1.7 返回”受委托”调用当前事件处理函数的DOM元素。
metaKey 1.0.4 指示触发事件时是否按下了Meta键。
namespace 1.4.3 返回触发事件时指定的命名空间。
pageX 1.0.4 返回鼠标相对于当前文档的x坐标。
pageY 1.0.4 返回鼠标相对于当前文档的y坐标。
relatedTarget 1.1.4 返回事件涉及到的其它DOM元素。
result 1.3 返回当前事件绑定的上一个事件处理函数的返回值。
target 1.3 最初触发该事件的DOM元素。
timeStamp 1.2.6 返回事件触发的当前时间与1970年1月1日午夜之间的毫秒数。
type 1.0 返回事件的类型。例如:”click”、”focus”等。
which 1.1.3 返回触发事件时按下的鼠标按钮或键盘按键。

data属性

data属性用于返回绑定当前事件处理函数时传递的附加数据。

data属性的返回值是任意类型，返回绑定当前事件处理函数时传递的附加数据。其类型取决于在绑定当前事件处理函数时所传入的附加数据的类型。
如果绑定时没有传入附加数据，则返回undefined。

1
2
3
4
5
6
7
// 附加数据可以为任意类型
var userObj = { name: "CodePlayer", age: 18 };

// 为所有p元素绑定click事件，并传入附加数据(user)
$("p").on( "click", userObj, function(event){
    alert( event.data.name ); // CodePlayer
} );

delegateTarget属性

delegateTarget属性用于返回负责绑定当前被调用的事件处理函数的DOM元素。

delegateTarget属性最常用于事件函数delegate()、 on()添加的委托事件中，用于返回受委托的DOM元素。

对于bind()、 live()、 click()等”非委托”事件函数而言，该属性的返回值等于currentTarget属性的值，也就是返回事件冒泡阶段中的当前DOM元素。

delegateTarget属性的返回值是Element类型，返回”受委托”绑定当前事件处理函数的的DOM元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 为id为element的元素中的所有span元素绑定click事件
$("#element").on( "click", "span", function(event){
    // event.delegateTarget 就是id为element的DOM元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this); // false 
} );

// 为id为element的元素中的所有span元素绑定click事件
$("#element span").bind( "click", function(event){
    // event.delegateTarget 就是当前触发事件的span元素
    // this 就是当前触发事件的span元素
    alert( event.delegateTarget === this ); // true
} );

namespace

namespace属性用于返回触发该事件时所指定的命名空间。

当需要为同一个元素、同一种事件类型绑定多个事件处理函数时，一般情况下，触发某个事件，就会触发执行与之对应的所有事件处理函数；解除某种类型的事件绑定，就会解除该事件类型绑定的所有事件处理函数。

jQuery中的事件函数可以在绑定事件处理函数时，为每个事件类型定义一个或多个命名空间。使用命名空间，我们就可以只触发执行指定命名空间下的事件处理函数，或者只移除指定命名空间下绑定的事件处理函数。

namespace属性的返回值是String类型，返回触发该事件时所指定的命名空间。
如果触发事件时没有指定命名空间，则返回空字符串(“”)。

jQuery中事件类型的命名空间有点类似于类名选择器(.className)。在绑定事件时，可以在事件类型后定义一个或多个命名空间；在触发事件或移除事件时，可以只触发或移除包含指定命名空间的事件处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<p>CodePlayer</p>

<script type="text/javascript">
// 事件处理函数，弹出警告框并显示命名空间
function handler( event ){
    alert( event.namespace );
}
var $p = $("p");

// A：为所有p元素绑定click事件，定义在abc和foo两个命名空间下
$p.on( "click.abc.foo", handler );

// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", handler );

// C：为所有p元素绑定click事件，定义在new和foo两个命名空间下
$p.on( "click.new.foo", handler );


// 执行所有的click事件处理函数，不限定命名空间 (触发A、B、C)
$p.trigger( "click" ); // ""

// 执行定义在abc命名空间下的click事件处理函数 (触发A)
$p.trigger( "click.abc" ); // "abc"
// 执行定义在foo命名空间下的click事件处理函数 (触发A和C)
$p.trigger( "click.foo" ); // "foo"
// 执行同时定义在foo和abc命名空间下的click事件处理函数 (触发A)
$p.trigger( "click.foo.abc" ); // "abc.foo"
// 执行定义在test命名空间下的click事件处理函数 (触发C)
$p.trigger( "click.test" ); // "test"

// 移除所有定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" );
</script>

which属性

which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。

对于键盘和鼠标事件，该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。

which属性对DOM原生的event.keyCode和event.charCode进行了标准化。

适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。

返回值
which属性的返回值是Number类型，返回触发当前事件时按下的键盘按键或鼠标按钮。

在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。

event.which属性值 对应的鼠标按钮
1 鼠标左键
2 鼠标中键(滚轮键)
3 鼠标右键

在keypress事件中，event.which属性返回的是输入的字符的Unicode值(相当于event.charCode)。以下是常用的字符Unicode代码对应表。更多字符的Unicode代码，请参见完整的ASCII编码表(Unicode兼容ASCII)。

which属性值(或范围) 对应的输入字符
48 - 57 对应字符 0 - 9
65 - 90 对应字符 A - Z
97 - 122 对应字符 a - z

在keydown、keyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：

which属性值(或范围) 对应的键盘按键
8 Backspace键
9 Tab键
13 Enter键
16 Shift键
17 Ctrl键
20 Alt键
20 Caps Lock键(大小写锁定)
27 Esc键
33 - 36 对应按键 PageUp、PageDown、End、Home
37 - 40 对应按键 左、上、右、下(方向键)
45 - 46 对应按键 Insert、Delete
48 - 57 对应按键 0 - 9(非小键盘)
65 - 90 对应按键 A - Z
91 Windows键
96 - 105 对应按键 0 - 9(小键盘)
106、107、109、110、111 对应按键*、+、-、.、/(小键盘)
112 - 123 对应按键 F1 - F12 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="msg"></div>
// 为当前文档绑定keydown和mousedown两种事件
// 检测鼠标按下了那些键
// 检测键盘按下了那些字母按键
$(document).bind("keydown mousedown", function(event){
    var msg = '';
    if( event.type == "mousedown" ){ // 鼠标按下事件
        var map = {"1": "左", "2":"中", "3":"右"};
        msg = '你按下了鼠标[' + map[event.which] + ']键';
    }else{ // 键盘按下事件
        if(event.which >= 65 && event.which <= 90){
            msg = '你按下了键盘[' + String.fromCharCode(event.which) + ']键';
        }
    }
    if(msg){
        $("#msg").prepend( msg + '<br>');
    }
});

Event 对象的方法

方法 初始版本 描述
isDefaultPrevented() 1.3 是否调用了preventDefault()方法。
isImmediatePropagationStopped() 1.3 是否调用了stopImmediatePropagation()方法。
isPropagationStopped() 1.3 是否调用了stopPropagation()方法。
preventDefault() 1.0 阻止触发事件的默认行为。
stopImmediatePropagation() 1.3 阻止该元素当前触发事件剩余的事件处理函数的执行，并停止事件的冒泡传递。
stopPropagation() 1.0 停止事件的冒泡传递。

preventDefault() 函数

preventDefault()函数用于阻止当前触发事件的默认行为。

在HTML文档中，当我们触发某些DOM元素的特定事件时，可以执行该元素的默认行为。比如链接的click事件：当我们点击一个链接时，就会跳转到指定的URL。再比如：

表单元素的submit事件，当我们触发表单的提交事件时，就可以提交当前表单。

preventDefault()函数没有返回值，也可以说返回值为undefined。
如果使用jQuery绑定的事件处理函数的返回值为false，jQuery也会阻止触发元素的默认行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="http://www.365mini.com" method="post">
    <input id="username" name="username" type="text" /><br>
    <input type="submit" value="提交" />
</form>
<a href="http://www.365mini.com">删除</a>

<!-- javascript代码 -->
$("a").click( function(event){
    if( !confirm("你确定要删除?") ){
        event.preventDefault();  // 阻止链接默认的URL跳转行为
        // return false; // 函数的返回值为false，也可以起到阻止默认行为的效果
    }   
} );


$("form").submit( function(event){
    if( !$("#username").val() ){
        alert("username is required!");
        event.preventDefault(); // 阻止默认的表单提交行为
        // return false; // 函数的返回值为false，也可以起到阻止默认行为的效果
    }   
} );

stopPropagation() 函数

stopPropagation()函数用于阻止当前事件在DOM树上冒泡。

根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

此外，由于live()函数并不是将事件处理函数直接绑定到自己身上，而是”委托”绑定到祖辈元素上，由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部，然后为符合条件的元素触发事件。因此，stopPropagation()函数无法阻止live事件的冒泡。

同样地，delegate()函数也是”委托事件函数”，只有事件冒泡传递到”受委托”的祖辈元素才会被触发执行。因此，stopPropagation()函数无法阻止该元素到”受委托”的祖辈元素之间的事件冒泡。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>
<!-- javascript -->
// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );

//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} );

//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click   
} );

stopImmediatePropagation() 函数

stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。

使用stopImmediatePropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。
此外，与event.stopPropagation()函数相比，stopImmediatePropagation()函数还会阻止该元素剩余的其他事件处理函数的执行。

此外，与event.stopPropagation()函数相比，stopImmediatePropagation()函数还会阻止该元素剩余的其他事件处理函数的执行。

此外，由于live()函数并不是将事件处理函数直接绑定到自己身上，而是”委托”绑定到祖辈元素上，由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部，然后为符合条件的元素触发事件。因此，stopImmediatePropagation()函数无法阻止live事件的冒泡。

同样地，delegate()函数也是”委托事件函数”，只有事件冒泡传递到”受委托”的祖辈元素才会被触发执行。因此，stopImmediatePropagation()函数无法阻止该元素到”受委托”的祖辈元素之间的事件冒泡。

坚持原创技术分享，您的支持将鼓励我继续创作！