事件對象屬性


jQuery在遵循W3C規范的情況下,對事件對象的常用屬性進行了封裝,使得事件處理在各大瀏覽器下都可以正常的運行而不需要進行瀏覽器類型判斷。在jQuery中,有如下常用的事件對象屬性。

event.type

該方法的作用是可以獲取事件的類型。

<a href="https://www.baidu.com/">百度</a>
<script>
     $("a").click(function(event){
          alert(event.type);    //獲取事件類型
          return false;         //阻止鏈接跳轉
     });
</script>

event.preventDefaule()

該方法的作用是阻止默認的事件行為,其特殊之處在於能夠兼容所有的瀏覽器,包括IE,因為在JavaScript中符合W3C規范的preventDefault()方法在IE瀏覽器中卻無效。

<form action="1.html">
  用戶名:<input type="text" id="uname" />
  <input type="submit" value="提交" id="sub"/>
</form>
<script>
  $("#sub").click(function(event){
    var uname = $("#uname").val();
    if(uname==""){
      alert("請填寫用戶名");
      event.preventDefault();
    }
  });
</script>

event.stopPropagation()

 該方法的作用是事件的冒泡。同樣,在JavaScript中的stopPropagation()方法在IE瀏覽器中無效,但是本方法卻可以兼容各種瀏覽器。

<div id="div">
  <span style="color:red;" id="span">我是span</span>
  我是div
</div>
<script>
  $("#span").click(function(event){
    alert($("#span").text());
    event.stopPropagation();
  });
  $("#div").click(function(event){
    alert($("#div").text());
  });
</script>

在上面的代碼中,如果不阻止事件冒泡,點擊span,會依次出現兩個彈框,當在span事件里添加阻止冒泡后,事件只會觸發span本身,彈框也只會出現一個。

event.target()

 該方法的作用是獲取到觸發事件的元素,經過jQuery的封裝后,避免了各瀏覽器不同標准的差異。

<a href="https://www.baidu.com/">百度</a>
<script>
  $("a").click(function(event){
    var tg = event.target;
    alert(tg.href);
    return false;
  })
</script>

event.pageX和event.pageY

這兩個方法的作用分別是獲取光標相對於頁面的x坐標和y左邊,在JavaScript中,不同的瀏覽器對於光標坐標的表示有所差異,在IE中,使用event.x和event.y,在Firefox中使用的是event.pageX和event.pageY,而jQuery對該方法進行了封裝,使之能兼容不同的瀏覽器。

 event.which

該方法的作用是在鼠標單擊事件中獲取鼠標的左、中、右鍵(1表示左鍵,2表示中鍵,3表示右鍵),在鍵盤事件中獲取鍵盤的按鍵,

<a href="https://www.baidu.com/">百度</a>
<script>
  $("a").click(function(event){
  alert(event.which);
})
</script>

 

event.metaKey

 該方法的作用是獲取鍵盤事件的<ctrl>按鍵。返回值是Boolean類型,如果按下,則返回true,否則返回false。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM