javascript中的綁定與解除綁定函數應用樣本

來源:互聯網
上載者:User

Mozilla中:

addEventListener的使用方式:

target.addEventListener(type, listener, useCapture);

target: 文檔節點、document、window 或 XMLHttpRequest。
type: 字串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :實現了 EventListener 介面或者是 JavaScript 中的函數。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中:

target.attachEvent(type, listener);
target: 文檔節點、document、window 或 XMLHttpRequest。
type: 字串,事件名稱,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :實現了 EventListener 介面或者是 JavaScript 中的函數。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同時支援移除指定的事件, 用途是移除設定的事件, 格式分別如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

target.addEventListener(type, listener, useCapture);
target 文檔節點、document、window 或 XMLHttpRequest。
type 字串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 實現了 EventListener 介面或者是 JavaScript 中的函數。
useCapture 是否使用捕捉,看了後面的事件流一節後就明白了,一般用 false
事件觸發時,會將一個 Event 對象傳遞給事件處理常式,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應的瀏覽器版本不同,同時在使用的過程中要注意
attachEvent方法 按鈕onclick IE中使用
addEventListener方法 按鈕click fox中使用
兩者使用的原理:可對執行的優先順序不一樣,下面執行個體講解如下:
attachEvent方法,為某一事件附加其它的處理事件。(不支援Mozilla系列)
addEventListener方法 用於 Mozilla系列
舉例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果這樣寫,那麼將會只有medhot3被執行
寫成這樣:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執行順序為method3->method2->method1
如果是Mozilla系列,並不支援該方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);執行順序為method1->method2->method3
執行個體:(要注意的是div必須放到js前面才行)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.