2

作为 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()的概念

提前致谢

4

2 回答 2

4

改变

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

至

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

因为当你在函数名后面写大括号 () 时，它会立即执行，但你想将函数作为参数传递。当你使用大括号时，你不传递函数，你传递它的返回值。

祝JS学习好运！

于 2013-07-17T22:44:33.653 回答
1

该onclick方法基于旧 API，已被 DOM 2 事件取代。这在总是优秀的 MDN 上被提及：

addEventListener() 是随 DOM 2 事件规范引入的。在此之前，事件监听器注册如下：

// 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-17T22:45:20.450 回答