javascript - 尝试理解 JavaScript 事件处理程序背后的概念

标签 javascript dom-events

作为 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 practising on</p>
<a id="test_click" href="#">test click</a>
</body>
</html>

请帮助解释 IE 中事件处理程序和 addEventListener()attachEvent() 的概念。

最佳答案

改变

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

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

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

祝 JS 学习顺利!

关于javascript - 尝试理解 JavaScript 事件处理程序背后的概念,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17711494/

相关文章:

javascript - 基于另一个单选组的单选按钮选中/取消选中

javascript - 对象 JSON 中的 invoque 数组

javascript - 触发两个脚本 : one that loads data and another that manipulates styling? 的正确方法是什么

JavaScript 多重自增变量解决方案

渐变的Javascript函数

javascript - 在动态创建的元素上添加事件监听器

javascript - 如何在jquery中添加一个或多个克隆

javascript - 如何在其他人向下滑动时删除一个类

单击按钮不会触发 JavaScript 函数

javascript - ajax 调用后选项卡不工作