本人對jquery的event不懂,搜索了很多關于jquery event事件介紹,下面我來記錄一下,有需要了解jquery event事件用法的朋友可參考。希望此文章對各位有所幫助。
學習要點：
事件對象 冒泡和阻止默認行為
一、事件對象
在JS中，我們已經詳細討論了JS的事件對象，這里就挑幾個常用的探討
<code class=" hljs xml"></code><div><code class=" hljs xml"> <input type="text"></code></div>
1.event.type 屬性獲取觸發事件名
<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 獲取額外數據，可以是數字、字符串、數組、對象
<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，區別與 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表示觸發事件的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("按鈕被觸發");});$("div").click(function () { console.log("div被觸發");});$(document).click(function () { console.log("document被觸發");});// 當單擊按鈕時，三個事件都被觸發// 當單擊div時，div和document被觸發// 當單擊document時，也僅有document事件被觸發</code></div>現在我們阻止冒泡，看看結果
<code class=" hljs javascript">$("input").click(function (e) { console.log("按鈕被觸發"); e.stopPropagation();});$("div").click(function (e) { console.log("div被觸發"); e.stopPropagation();});$(document).click(function () { console.log("document被觸發");});</code>無論你怎樣單擊按鈕和div，它也只能觸發自己的時間，因為冒泡被阻止了
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>取消冒泡后取消后續的事件處理函數
<code class=" hljs javascript">$("a").click(function (e) { console.log("a"); // e.preventDefault(); // 三個都觸發 // e.stopPropagation(); // 觸發前兩個 // e.stopImmediatePropagation(); // 只觸發第一個});$("a").click(function () { console.log("i am a");}); $(document).click(function () { console.log("i am document");})</code>判斷是否調用了 stopPropagation()方法
<code class=" hljs javascript">$("div").click(function (e) { e.stopPropagation(); console.log(e.isPropagationStopped()); // true})</code>判斷是否執行了 stopImmediatePropagation()方法<code class=" hljs javascript">$('div').click(function (e) { e.stopImmediatePropagation(); console.log(e.isImmediatePropagationStopped()); // true});</code>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
