jQuery事件對象總結
本人對jquery的event不懂,搜索了很多關于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)在我們阻止冒泡,看看結果
<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>
判斷是否調用了 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
淺談jquery fullpage 插件增加頭部和版權的方法
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看2018-03-03jquery插件uploadify多圖上傳功能實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery插件uploadify多圖上傳功能實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08jquery keypress,keyup,onpropertychange鍵盤事件
項目所需,在試圖用js實現(xiàn)這樣的功能:文本框失去焦點時,判斷輸入字符串的長度,以驗證是否超出范圍,超出范圍則自動截取。2010-06-06詳談 Jquery Ajax異步處理Json數(shù)據(jù).
啥叫異步,啥叫Ajax.咱不談啥XMLHTTPRequest.通俗講異步就是前臺頁面javascript能調用后臺方法.這樣就達到了無刷新.2011-09-09