當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js 事件

發布時間：2025/5/22 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

javaScript 與 HTML 之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器(或處理程序)來預訂事件，以便事件發生時執行相應的代碼。這種在傳統軟件工程中被稱為觀察員模式的模型，支持頁面的行為(JavaScript 代碼)與頁面的外觀(HTML 和 CSS 代碼)之間的松散耦合。

1. 事件流

　　事件流描述的是從頁面中接收事件的順序。

2.事件冒泡

　　IE 的事件流叫做事件冒泡(event bubbling)，即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然后逐級向上傳播到較為不具體的節點(文檔)。

3.事件捕獲

　　Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲(event capturing)。事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。

4.DOM事件流

　　“DOM2級事件”規定的事件流包括三個階段: 事件捕獲階段、處于目標階段?和 事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。

5.事件綁定

(1)

<button οnclick="test()">按鈕</button> function test(){console.log('點擊事件'); }

(2)

var btn = document.getElementById("myBtn"); btn.onclick = function(){alert("Clicked"); };
btn.onclick = null; //刪除事件處理程序

(3)

“DOM2 級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作:addEventListener() 和 removeEventListener()。所有 DOM 節點中都包含這兩個方法，并且它們都接受 3 個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是 true，表示在捕獲階段調用事件處理程序;如果是 false，表示在冒泡階段調用事件處理程序。　

var btn = document.getElementById("myBtn");var handler = function(){alert(this.id);}; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); //移除事件

IE 實現了與 DOM 中類似的兩個方法:attachEvent()和 detachEvent()。這兩個方法接受相同的兩個參數:事件處理程序名稱與事件處理程序函數。由于 IE8 及更早版本只支持事件冒泡，所以通過 attachEvent()添加的事件處理程序都會被添加到冒泡階段。

var btn = document.getElementById("myBtn"); var handler = function(){alert("Clicked"); }; btn.attachEvent("onclick", handler); //移除事件 btn.detachEvent("onclick", handler);

6.跨瀏覽器的事件處理程序　

7.?DOM中的事件對象

　　兼容 DOM 的瀏覽器會將一個 event 對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法(DOM0 級或 DOM2 級)，都會傳入 event 對象。

var btn = document.getElementById("myBtn"); btn.onclick = function(event){
　　alert(event.type); //"click" }; btn.addEventListener("click", function(event){alert(event.type); //"click"
}, false);

事件對象屬性：

在事件處理程序內部，對象 this 始終等于 currentTarget 的值，而 target 則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則 this、currentTarget 和 target 包含相同的值。來看下面的例子。

var btn = document.getElementById("myBtn"); btn.onclick = function(event){alert(event.currentTarget === this); //truealert(event.target === this); //truealert(event.target === document.getElementById("myBtn"));//true };

要阻止特定事件的默認行為，可以使用 event.preventDefault() 方法。

event.stopPropagation()?方法用于立即停止事件在 DOM 層次中的傳播，即取消進一步的事件捕獲或冒泡

事件對象的 eventPhase 屬性可以用來確定事件當前正位于事件流的哪個階段。

　　捕獲階段 :? 1

　　目標階段：2

　　冒泡階段:? 3

ps:?只有在事件處理程序執行期間，event 對象才會存在;一旦事件處理程序執行完成，event 對象就會被銷毀。

8. IE中的事件對象

　　與訪問 DOM 中的 event 對象不同，要訪問 IE 中的 event 對象有幾種不同的方式，取決于指定事件處理程序的方法。

var btn = document.getElementById("myBtn");btn.onclick = function(){var event = window.event;alert(event.type); //"click" };

在此，我們通過 window.event 取得了 event 對象，并檢測了被觸發事件的類型(IE 中的 type 屬性與 DOM 中的 type 屬性是相同的)。可是，如果事件處理程序是使用 attachEvent()添加的，那么就會有一個 event 對象作為參數被傳入事件處理程序函數中，如下所示。

var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(event){
　　alert(event.type); //"click" });

在像這樣使用 attachEvent()的情況下，也可以通過 window 對象來訪問 event 對象，就像使用 DOM0 級方法時一樣。

事件對象屬性：

因為事件處理程序的作用域是根據指定它的方式來確定的，所以不能認為 this 會始終等于事件目標。故而，最好還是使用 event.srcElement 比較保險。例如

var btn = document.getElementById("myBtn"); btn.onclick = function(){alert(window.event.srcElement === this); //ture }; btn.attachEvent("onclick", function(event){alert(event.srcElement === this); //true });

returnValue 屬性相當于 DOM 中的 preventDefault()方法，它們的作用都是取消給定事件的默認行為。只要將 returnValue 設置為 false，就可以阻止默認行為。

相應地，cancelBubble 屬性與 DOM 中的 stopPropagation()方法作用相同，都是用來停止事件冒泡的。由于 IE 不支持事件捕獲，因而只能取消事件冒泡;

但 stopPropagatioin()?可以同時取消事件捕獲和冒泡。

var btn = document.getElementById("myBtn"); btn.onclick = function(){alert("Clicked"); window.event.cancelBubble = true; //阻止事件冒泡 };

9.?跨瀏覽器的事件對象

示例：

btn.onclick = function(event){event = EventUtil.getEvent(event); };

10 事件類型

（1）ui 事件：?

DOMActivate：?表示元素已經被用戶操作激活
load：當頁面完全加載后在 window 上面觸
unload：當頁面完全卸載后在 window 上面觸發
abort：在用戶停止下載過程時，如果嵌入的內容沒有加載完，則在<object>元素上面觸發
error：當發生 JavaScript 錯誤時在 window 上面觸發
select：當用戶選擇文本框(<input>或<texterea>)中的一或多個字符時觸發
resize：當窗口或框架的大小變化時在 window 或框架上面觸發
scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發。

?（2）焦點事件

blur:?在元素失去焦點時觸發。這個事件不會冒泡;所有瀏覽器都支持

focus:?在元素獲得焦點時觸發。這個事件不會冒泡;所有瀏覽器都支持

focusin：在元素獲得焦點時觸發。會冒泡

focusout：在元素失去焦點時觸發

? ? ?其中，blur、和focusout的事件目標是失去焦點的元素;而focus、?focusin 的事件目標是獲得焦點的元素。

（3）鼠標與滾輪事件

click：在用戶單擊主鼠標按鈕（左邊按鈕）或者按下回車鍵時觸發，這一點對確保易訪問性很重要，意味著 onclick 事件處理程序既可以通過鍵盤也可以通過鼠標執行。
dblclick：在用戶雙擊主鼠標按鈕(左邊按鈕)時觸發
mousedown：在用戶按下了任意鼠標按鈕時觸發。不能通過鍵盤觸發這個事件。
mouseenter：在鼠標光標從元素外部首次移動到元素范圍之內時觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。
mouseleave：在位于元素上方的鼠標光標移動到元素范圍之外時觸發。這個事件不冒泡，而且在光標移動到后代元素上不會觸發。
mousemove：當鼠標指針在元素內部移動時重復地觸發。不能通過鍵盤觸發這個事件。
mouseout：當鼠標移出目標元素上方觸發，不能通過鍵盤觸發這個事件。
mouseover：?鼠標移入目標元素上方，鼠標移到其后代元素上時會觸發，不能通過鍵盤觸發這個事件。
mouseup：?在用戶釋放鼠標按鈕時觸發，不能通過鍵盤觸發這個事件。

　　雙擊事件觸發順序：　　　

　　　　(1) mousedown (2) mouseup (3) click?(4) mousedown (5) mouseup?(6) click?(7) dblclick

　　ie下：

　　　　IE8 及之前版本中的實現有一個小 bug，因此在雙擊事件中，會跳過第二個 mousedown 和 click事件，其順序如下:

　　　　(1) mousedown(2) mouseup(3) click 9 (4) mouseup(5) dblclick

　　　　IE9 修復了這個 bug，之后順序就正確了。

（4）鼠標滾輪事件

　　IE 6.0 首先實現了 mousewheel 事件。此后，Opera、Chrome 和 Safari 也都實現了這個事件。當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時(無論向上還是向下)，就會觸發 mousewheel 事件。這個事件可以在任何元素上面觸發，最終會冒泡到 document(IE8)或 window(IE9、Opera、 Chrome 及 Safari)對象。與 mousewheel 事件對應的 event 對象除包含鼠標事件的所有標準信息外，還包含一個特殊的 wheelDelta 屬性。當用戶向前滾動鼠標滾輪時，wheelDelta 是 120 的倍數;當用戶向后滾動鼠標滾輪時，wheelDelta 是?120 的倍數

EventUtil.addHandler(document, "mousewheel", function(event){
　　event = EventUtil.getEvent(event);
　　alert(event.wheelDelta); });

Firefox 支持一個名為 DOMMouseScroll 的類似事件，也是在鼠標滾輪滾動時觸發。與 mousewheel 事件一樣，DOMMouseScroll 也被視為鼠標事件，因而包含與鼠標事件有關的所有屬性。而有關鼠標滾輪的信息則保存在 detail 屬性中，當向前滾動鼠標滾輪時，這個屬性的值是-3 的倍數，當向后滾動鼠標滾輪時，這個屬性的值是 3 的倍數。

EventUtil.addHandler(window, "DOMMouseScroll", function(event){
　　event = EventUtil.getEvent(event);alert(event.detail); });

（5）觸摸設備

　　iOS 和 Android 設備的實現非常特別，因為這些設備沒有鼠標。在面向 iPhone 和 iPod 中的 Safari 開發時，要記住以下幾點。

不支持 dblclick 事件。雙擊瀏覽器窗口會放大畫面，而且沒有辦法改變該行為。

輕擊可單擊元素會觸發 mousemove 事件。如果此操作會導致內容變化，將不再有其他事件發生;如果屏幕沒有因此變化，那么會依次發生 mousedown、mouseup 和 click 事件。輕擊不可單擊的元素不會觸發任何事件。可單擊的元素是指那些單擊可產生默認操作的元素(如鏈接)，或者那些已經被指定了 onclick 事件處理程序的元素。
mousemove 事件也會觸發 mouseover 和 mouseout 事件。
兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發 mousewheel 和 scroll 事件。

（6）鍵盤與文本事件

keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重復觸發此事件。

keypress：?當用戶按下鍵盤上的字符鍵時觸發，而且如果按住不放的話，會重復觸發此事件。按下 Esc 鍵也會觸發這個事件
keyup：當用戶釋放鍵盤上的鍵時觸發。
textInput：這個事件是對 keypress 的補充，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發 textInput 事件。

　　在發生 keydown 和 keyup 事件時，event 對象的 keyCode 屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。

var textbox = document.getElementById("myText"); EventUtil.addHandler(textbox, "keyup", function(event){event = EventUtil.getEvent(event);alert(event.keyCode); });

（7）HTML5 事件

contextmenu：右擊菜單事件，可使用該事件自定義菜單
beforeunload：這個事件會在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載并繼續使用原有頁面

EventUtil.addHandler(window, "beforeunload", function(event){
　　event = EventUtil.getEvent(event);var message = "I'm really going to miss you if you go.";
　　event.returnValue = message;return message;
});

　　為了顯示彈出對話框，必須將 event.returnValue 的值設置為要顯示給用戶的字符串，同時作為函數的值返回

DOMContentLoaded：window 的 load 事件會在頁面中的一切都加載完畢時觸發，但這個過程可能會因為要加載的外部資源過多而頗費周折。而 DOMContentLoaded 事件則在形成完整的 DOM 樹之后就會觸發，不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經下載完畢。與 load 事件不同， DOMContentLoaded 支持在頁面下載的早期添加事件處理程序，這也就意味著用戶能夠盡早地與頁面進行交互。

hashchange ：HTML5 新增了 hashchange 事件，以便在 URL 的參數列表(及 URL 中“#”號后面的所有字符串) 發生變化時通知開發人員。

?（9）觸摸事件

touchstart：當手指觸摸屏幕時觸發;即使已經有一個手指放在了屏幕上也會觸發。
touchmove:當手指在屏幕上滑動時連續地觸發。在這個事件發生期間，調用 preventDefault()?可以阻止滾動。
touchend:當手指從屏幕上移開時觸發。
touchcancel:當系統停止跟蹤觸摸時觸發。

　　除了常見的 DOM 屬性外，觸摸事件還包含下列三個用于跟蹤觸摸的屬性。

　　　　touches:表示當前跟蹤的觸摸操作的 Touch 對象的數組。

　　　　targetTouchs:特定于事件目標的 Touch 對象的數組。

　　　　changeTouches:表示自上次觸摸以來發生了什么改變的 Touch 對象的數組。

（10）手勢事件

gesturestart:當一個手指已經按在屏幕上而另一個手指又觸摸屏幕時觸發。
gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。

gestureend:當任何一個手指從屏幕上面移開時觸發。

只有兩個手指都觸摸到事件的接收容器時才會觸發這些事件。在一個元素上設置事件處理程序，意味著兩個手指必須同時位于該元素的范圍之內，才能觸發手勢事件(這個元素就是目標)。由于這些事件冒泡，所以將事件處理程序放在文檔上也可以處理所有手勢事件。此時，事件的目標就是兩個手指都位于其范圍內的那個元素。

?11.?事件委托

　　對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click 事件會一直冒泡到 document 層次。也就是說，我們可以為整個頁面指定一個 onclick 事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。

轉載于:https://www.cnblogs.com/bruce-gou/p/9682390.html

總結

以上是生活随笔為你收集整理的js 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

事件
js

上一篇： Django form表单
下一篇： CentOS7x64 防火墙配置