jQuery 事件对象的属性

jQuery 在遵循 W3C 规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

(1) event.type

该方法的作用是可以获取到事件的类型。

<script>
$(function(){
    $("a").click(function(event) {
      alert(event.type);//获取事件类型
      return false;//阻止链接跳转
    });
})
</script>

<body>
<a href='http://google.com'>click me .</a>
</body>

以上代码运行后会输出："click”

(2) event.preventDefault() 方法

该方法的作用是阻止默认的事件行为。JavaScript 中符合 W3C 规范的 preventDefault() 方法在 IE 浏览器中却无效。 jQuery 对其进行了封装，使之能兼容各种浏览器。

(3 ) event.stopPropagation()方法

该方法的作用是阻止事件的冒泡。 JavaScript 中符合 W3C 规范的 stopPropagation() 方法在 IE 浏览器中却无效。 jQuery 对其进行了封装，使之能兼容各种浏览器。

(4) event.target

event.target 的作用是获取到触发事件的元素。 jQuery 对其封装后，避免了各个浏览器不同标准的差异。

<script>
$(function(){
    $("a[href='http://google.com']").click(function(event) {
      var tg = event.target;  //获取事件对象
      alert(tg.href) ;
      return false;//阻止链接跳转
    });
})
</script>

<body>
<a href='http://google.com'>click me .</a>
</body>

以上代码运行后会输出："http://google.com"

(5 ) event.relatedTarget

在标准 DOM 中，mouseover 和 mouseout 所发生的元素可以通过 event.target 来访问，相关元素是通过 event.relatedTarget 来访问的。 event.relatedTarget 在 mouseover 中相当于 IE 浏览器的event.fromElement，在 mouseout 中相当于 IE 浏览器event.toElement ， jQuery 对其进行了封装，使之能兼容各种浏览器。

(6) event.pageX 和 event.pageY

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用 jQuery 时，那么IE浏览器中是用 event.x / event.y，而在 Firefox 浏览器中是用 event.pageX / event.pageY 。如果页面上有滚动条，则还要加上滚动条的宽度或高度。

<script>
$(function(){
    $("a").click(function(event) {
      alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
      return false;//阻止链接跳转
    });
})
</script>

(7) event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。比如，获取鼠标的左、中、右键：

$(function(){
    $("a").mousedown(function(e){
        alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
        return false;//阻止链接跳转
    })
})

以上代码加载到页面后，用鼠标单击页面时，单击左、中、右键分别返回1、2、3。

比如，获取键盘的按键：

$(function(){
    $("input").keyup(function(e){
        alert(e.which);
    })
})

(8) event.metaKey

针对不同浏览器对键盘中的<ctrl>按键解释不同， jQuery 也进行了封装，并规定 event.metaKey 为键盘事件中获取<ctrl>按键。

<script>
$(function(){
    $("input").keyup(function(e){
        alert( e.metaKey +" "+e.ctrlKey );
        $(this).blur();
    })
})
</script>

<body>
<input type="text" value="按住ctrl键，然后再点其他任何键" style="width:200px"/>
</body>

注意 : 更多的 event 的属性和方法可以访问：http://api.jquery.com/category/events/event-object/

jQuery 事件对象的属性

猜你喜欢