jQuery事件對象總結(jié)

更新時間：2016年10月17日 15:56:07 作者：光明大神棍的博客

事件是腳本編程的靈魂,本篇來介紹jQuery中的事件處理及事件對象.這里整理了詳細的代碼,有需要的小伙伴可以參考下。

本人對jquery的event不懂,搜索了很多關(guān)于jquery event事件介紹,下面我來記錄一下,有需要了解jquery event事件用法的朋友可參考。希望此文章對各位有所幫助。

學習要點：

事件對象冒泡和阻止默認行為

一、事件對象

在JS中，我們已經(jīng)詳細討論了JS的事件對象，這里就挑幾個常用的探討

<code class=" hljs xml"></code><div><code class=" hljs xml">
  <input type="text">
</code></div>

1.event.type 屬性獲取觸發(fā)事件名

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.type);    // click
});</code>

2.event.target獲取綁定DOM的元素

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.target);   // div
});</code>

3.event.data 獲取額外數(shù)據(jù)，可以是數(shù)字、字符串、數(shù)組、對象

<code class=" hljs javascript">$("div").bind("click", {"name" : "zhang", "age" : 20}, function (e) {
  for(var i in e.data) {
    console.log(i + " = " + e.data[i]);
  }
})</code>

4.event.relatedTarget 獲取移入移出目標點離開或進入的那個 DOM 元素

<code class=" hljs javascript">$("div").mouseover(function (e) {
  console.log(e.relatedTarget);    // body
});</code>

5.event.currentTarget 獲取綁定的那個 DOM 元素，相當于 this，區(qū)別與 event.target

<code class=" hljs xml"><ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul></code>
<code class=" hljs javascript">// 事件委托
$("ul").click(function (e) {
  console.log(e.target);   // li
});
$("ul").click(function (e) {
  console.log(e.currentTarget);    // ul
});</code>

PS : target表示觸發(fā)事件的DOM，currentTarget表示綁定事件的元素 6.event.result 表示獲取上次事件的值

<code class=" hljs lua"></code><div><code class=" hljs lua">
  <input type="text">
$("div").click(function () {
  return "123";
});
$("div").click(function (e) {
  console.log(e.result);   // 123
});</code></div>

7.event.timeStamp 獲取當前時間戳

<code class=" hljs javascript">$("div").click(function (e) {
  console.log(e.timeStamp);
});</code>

8.event.which 獲取鼠標的左中右鍵

<code class=" hljs javascript">$("div").mousedown(function (e) {
  var key = '';
  switch (e.which) {
    case 1:
      key = "左鍵";
      break;
    case 2:
      key = "中鍵";
      break;
    case 3:
      key = "右鍵";
      break;
  }
  console.log(key);
});</code>

同時event.which也可以獲取鍵盤上的鍵

<code class=" hljs javascript">$("input").keyup(function (e) {
  console.log(e.which);
});</code>

9.event.ctrlKey 判斷是否按下了ctrl鍵

<code class=" hljs javascript">$("input").keyup(function (e) {
  console.log(e.ctrlKey);   // 返回布爾值
})</code>

10.獲取鼠標當前的位置

<code class=" hljs avrasm">$(document).click(function (e) {
  console.log("screenX: " + e.screenX);
  console.log("pageX: " + e.pageX);
  console.log("clientX: " + e.clientX);
});</code>

二．冒泡和默認行為 1.事件冒泡和阻止冒泡先來看看一個冒泡的例子

<code class=" hljs php"></code><div><code class=" hljs php">
  <input type="button" value="按鈕">
$("input").click(function () {
  console.log("按鈕被觸發(fā)");
});
$("div").click(function () {
  console.log("div被觸發(fā)");
});
$(document).click(function () {
  console.log("document被觸發(fā)");
});
// 當單擊按鈕時，三個事件都被觸發(fā)
// 當單擊div時，div和document被觸發(fā)
// 當單擊document時，也僅有document事件被觸發(fā)</code></div>

現(xiàn)在我們阻止冒泡，看看結(jié)果

<code class=" hljs javascript">$("input").click(function (e) {
  console.log("按鈕被觸發(fā)");
  e.stopPropagation();
});
$("div").click(function (e) {
  console.log("div被觸發(fā)");
  e.stopPropagation();
});
$(document).click(function () {
  console.log("document被觸發(fā)");
});</code>

無論你怎樣單擊按鈕和div，它也只能觸發(fā)自己的時間，因為冒泡被阻止了

2.阻止默認行為

<code class=" hljs lua"></code><div><code class=" hljs lua"> 
$("a").click(function (e) {
  e.preventDefault();
});</code></div>

3.同時阻止默認行為和冒泡

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  e.stopPropagation();
  e.preventDefault();
});
$("div").click(function () {
  console.log("div");
});</code>

或者用 return false;

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  return false;
});
$("div").click(function () {
  console.log("div");
});</code>

3.阻止事件冒泡和默認行為的一些方法

判斷是否取消了默認行為

<code class=" hljs javascript">$("a").click(function (e) {
  e.preventDefault();
  console.log(e.isDefaultPrevented());  // true
})</code>

取消冒泡后取消后續(xù)的事件處理函數(shù)

<code class=" hljs javascript">$("a").click(function (e) {
  console.log("a");
  // e.preventDefault();   // 三個都觸發(fā)
  // e.stopPropagation(); // 觸發(fā)前兩個
  // e.stopImmediatePropagation();  // 只觸發(fā)第一個
});
$("a").click(function () {
  console.log("i am a");
}); 
$(document).click(function () {
  console.log("i am document");
})</code>

判斷是否調(diào)用了 stopPropagation()方法

<code class=" hljs javascript">$("div").click(function (e) {
  e.stopPropagation();
  console.log(e.isPropagationStopped()); // true
})</code>
判斷是否執(zhí)行了 stopImmediatePropagation()方法
<code class=" hljs javascript">$('div').click(function (e) {
  e.stopImmediatePropagation();
  console.log(e.isImmediatePropagationStopped());   // true
});</code>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: