js事件

-Advertisement-

事件綁定事件綁定方法I：綁定元素屬性事件綁定方法II：綁定對象屬性事件綁定方法III：使用addEventListener() 方法(DOM2級事件程式) addEventListener 語法：target.addEventListener(type,listener,useCapture) ...

事件綁定

事件綁定方法I：綁定元素屬性

事件綁定方法II：綁定對象屬性

事件綁定方法III：使用addEventListener() 方法(DOM2級事件程式)

addEventListener

語法：target.addEventListener(type,listener,useCapture);

接受3個參數：要處理的事件名、作為事件處理程式的函數和一個布爾值。

·type: 字元串,事件名稱,不含“on”,比如“click”、 “mouseover”、“keydown”等。

·listener :實現了 EventListener 介面或者是 JavaScript 中的函數。 ·

useCapture :是否使用捕獲,一般用 false 。

removeEventListener

語法：target.removeEventListener(type,listener,useCapture); 寫的參數和addEventListener()函數的相同。

實現刪除addEventListener()函數添加的事件處理。

IE事件處理程式

IE8及以下瀏覽器不支持addEventListener， IE8及以下版本瀏覽器實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。這兩個方法都需要兩個參數：事件名稱和事件處理函數。

IE11只支持addEventListener！ IE9，IE10對attachEvent和addEventListener都支持！ IE8及以下版本只支持attachEvent！

事件流

事件流描述的是從頁面中接受事件的順序。 IE和Netscape開發團隊提出了兩個截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。事件冒泡 IE的事件流叫做事件冒泡，即事件開始時由最具體的元素接受，然後逐級向上傳播到較為不具體的節點。

eg:點擊按鈕，那麼這個click事件會按照這樣傳播：

<input>→<div>→<body>→<html>→document

事件源

概念：發生事件的DOM節點（HTML元素）。不管在哪個事件中，只要你操作的那個元素就是事件源。獲取方式： ie：window.event.srcElement 標準下:event.target

事件委托

事件委托：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。 (利用冒泡的原理，把事件加到父級上，觸發執行效果。) 好處：提高性能。 Eg: oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //(W3C||IE) if(target.nodeName.toLowerCase() == 'li'){ target.style.background = "red"; } };

阻止預設事件

有一些html元素預設的行為，比如說a標簽，點擊後有跳轉動作；form表單中的submit類型的input有一個預設提交跳轉事件；reset類型的input有重置表單行為。阻止方式： 1.return false; (HTML、DOM0級) 2. event.preventDefault(); (W3C) 3.event.returnValue = false;(IE) 相容寫法： if (event.preventDefault) { event.preventDefault(); }else{ event.returnValue = false; }

阻止冒泡事件

不再派發事件 event.stopPropagation();//標準瀏覽器 event.cancelBubble = true; // IE瀏覽器相容寫法: if (event.stopPropagation) { event.stopPropagation(); }else{ event.cancelBubble = true; }

您的分享是我們最大的動力!