addEventListener與onclick

時間 2020-01-09

標籤 addeventlistener onclick 简体版

原文原文鏈接

addEventListener和onclick什麼區別？ html

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代碼一塊兒駐留在單獨的.js文件中，而且它們均可以正常工做。瀏覽器

#1樓

JavasSript中'this'關鍵字引用的上下文不一樣。安全

看下面的代碼： app

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <input id="btnSubmit" type="button" value="Submit" />
    <script>
        function disable() {
            this.disabled = true;
        }
        var btnSubmit = document.getElementById('btnSubmit');
        btnSubmit.onclick = disable();
        //btnSubmit.addEventListener('click', disable, false);
    </script>
</body>
</html>

它的做用很是簡單。當您單擊該按鈕時，該按鈕將被自動禁用。函數

首先，當您嘗試以這種方式button.onclick = function(),事件button.onclick = function(),將經過單擊按鈕來觸發onclick事件，可是不會禁用該按鈕，由於button.onclick和onclick事件之間沒有顯式綁定處理程序。若是調試時看到'this'對象，則能夠看到它指向'window'對象。 this

其次，若是您評論btnSubmit.onclick = disable(); 並取消註釋//btnSubmit.addEventListener('click', disable, false); 您會看到該按鈕被禁用，由於經過這種方式，button.onclick事件和onclick事件處理程序之間存在顯式綁定。若是您調試到禁用功能，則能夠看到'this'是指button control而不是window 。 spa

這是我不喜歡JavaScript的不一致之處。順便說一句，若是您使用的是jQuery（ $('#btnSubmit').on('click', disable); ），它將使用顯式綁定。 .net

#2樓

若是您不太擔憂瀏覽器的支持，則可使用一種方法在事件調用的函數中從新綁定「 this」引用。一般，它會指向函數執行時生成事件的元素，而這並不老是您想要的。棘手的部分是要同時可以刪除徹底相同的事件偵聽器，如本例所示： http : //jsfiddle.net/roenbaeck/vBYu3/ prototype

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

上面的代碼在Chrome中運行良好，而且可能存在使「綁定」與其餘瀏覽器兼容的問題。線程

#3樓

使用內聯處理程序與內容安全策略不兼容，所以從該角度來看， addEventListener方法更加安全。固然，您可使用unsafe-inline啓用內聯處理程序，可是，顧名思義，這樣作並不安全，由於它會帶回CSP阻止的全部JavaScript開發。

#4樓

還沒有注意到一個細節：現代的桌面瀏覽器將不一樣的按鈕按下視爲AddEventListener('click'和onclick的默認AddEventListener('click' 。

在Chrome 42和IE11上， onclick和AddEventListener均會在左鍵和中鍵單擊時觸發。
在Firefox 38上， onclick 僅在左鍵單擊時觸發，而AddEventListener單擊則在左鍵，中鍵和右鍵單擊時觸發。

此外，當涉及滾動遊標時，跨瀏覽器的中鍵點擊行爲也很是不一致：

在Firefox上，老是會觸發中點擊事件。
在Chrome上，若是Middleclick打開或關閉滾動光標，它們將不會觸發。
在IE上，當滾動光標關閉時會觸發，但在打開時不會觸發。

還值得注意的是，任何鍵盤可選擇的HTML元素（例如input 「 click」事件也會在選中時觸發空格或Enter鍵。

#5樓

也應該能夠經過對原型進行擴展來擴展偵聽器（若是咱們有對它的引用，而且它不是匿名函數）-或使「 onclick」調用對函數庫的調用（調用其餘函數的函數）

喜歡

elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

這意味着咱們沒必要改變onclick調用，只需更改函數myFunctionList（）便可完成咱們想要的操做，但這使咱們沒法控制冒泡/捕獲階段，所以對於較新的瀏覽器應避免使用。

以防萬一未來有人找到這個線程...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。