試圖理解JavaScript事件處理程序

作爲在javascript初學者背後的概念，一種是與試圖理解JavaScript事件處理程序

addEventListener()

功能略微困惑，相對於使用的

variable.onclick

下面是代碼我正在與

/* 
    * A simple function to swap the text of two elements   
    */ 
    function swapFunction(){ 
     var siteTitle = document.getElementById("site_title"); 
     var siteText = document.getElementById("site_text"); 

     var temp   = siteTitle.innerHTML; 
     siteTitle.innerHTML = siteText.innerHTML;   
     siteText.innerHTML = temp; 
     return false; 
    } 

    /* 
     * A function to handle the page load 
     */ 
    function fullyLoaded(){    
     var testEvent =  document.getElementById("test_click");    

     /* 
     * Why does the line that has been commented out not work 
     * Yet the line beneath it does? 
     */ 

     //testEvent.addEventListener("click", swapFunction(), false); 
     testEvent.onclick = swapFunction; 
    } 

    window.onload = fullyLoaded;

的Html

測試它

<html> 
<head> 
<title>This is a test application</title> 
</head> 
<body> 
<h1 id="site_title">Welcome To My Site</h1> 
<p id="site_text">This is a test site that I am practicing on</p> 
<a id="test_click" href="#">test click</a> 
</body> 
</html>

請幫忙在IE中解釋事件處理程序和使用addEventListener（）或的attachEvent（）的概念

在此先感謝

來源

2013-07-17 user866190

很像jQuery的執行事件和事件處理像click（）例如：onClick是一個單純的別名，或者是實際發生在幕後的快捷方式。 – iGanja

變化

testEvent.addEventListener("click", swapFunction(), false);

到

testEvent.addEventListener("click", swapFunction, false);

因爲在函數後面寫了大括號（）名稱，它會立即執行，但您想將該函數作爲參數傳遞。當你使用花括號時，你不會傳遞函數，你會傳遞它的返回值。

祝你好運JS學習！

來源

2013-07-17 22:44:33 dbanet

onclick方法基於較舊的API，它被DOM 2 Events取代。在始終優秀的MDN上提到了here：

addEventListener（）是隨DOM 2 Events規範一起引入的。在此之前，事件監聽器註冊如下：

// Pass a function reference — do not add '()' after it, which would call the function! 
el.onclick = modifyText;

註釋的線下不起作用，因爲你馬上調用swapFunction（即你發送的swapFunction的結果，而不是函數本身）。這是正確的語法：

testEvent.addEventListener("click", swapFunction, false);

// 「swapFunction」，而不是「swapFunction（）」

來源

2013-07-17 22:45:20 McGarnagle

試圖理解JavaScript事件處理程序

回答

相關問題