jQuery事件對(duì)象總結(jié)

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

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

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

學(xué)習(xí)要點(diǎn)：

事件對(duì)象冒泡和阻止默認(rèn)行為

一、事件對(duì)象

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

<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ù)組、對(duì)象

<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 獲取移入移出目標(biāo)點(diǎn)離開(kāi)或進(jìn)入的那個(gè) DOM 元素

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

5.event.currentTarget 獲取綁定的那個(gè) DOM 元素，相當(dāng)于 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 獲取當(dāng)前時(shí)間戳

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

8.event.which 獲取鼠標(biāo)的左中右鍵

<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>

同時(shí)event.which也可以獲取鍵盤(pán)上的鍵

<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.獲取鼠標(biāo)當(dāng)前的位置

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

二．冒泡和默認(rèn)行為 1.事件冒泡和阻止冒泡先來(lái)看看一個(gè)冒泡的例子

<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ā)");
});
// 當(dāng)單擊按鈕時(shí)，三個(gè)事件都被觸發(fā)
// 當(dāng)單擊div時(shí)，div和document被觸發(fā)
// 當(dāng)單擊document時(shí)，也僅有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>

無(wú)論你怎樣單擊按鈕和div，它也只能觸發(fā)自己的時(shí)間，因?yàn)槊芭荼蛔柚沽?

2.阻止默認(rèn)行為

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

3.同時(shí)阻止默認(rèn)行為和冒泡

<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.阻止事件冒泡和默認(rèn)行為的一些方法

判斷是否取消了默認(rèn)行為

<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();   // 三個(gè)都觸發(fā)
  // e.stopPropagation(); // 觸發(fā)前兩個(gè)
  // e.stopImmediatePropagation();  // 只觸發(fā)第一個(gè)
});
$("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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: