javascript - 为什么这段代码click事件监听无效

问题描述

问 题

程序作用是input输入文字后，点击按钮，在divlist后新增一个div子节点。
但是这段代码直接运行了vivi()，而且点击btn无效。

html

<form action="">
  <input type="text" id="inputtext"/>
  <button id="btn">i</button>
</form>
<div id="divlist"></div>

js

 window.onload = function(){
        var btn = document.getElementById("btn");
        var inputtext = document.getElementById("inputtext");
        var divlist = document.getElementById("divlist");
        function vivi(){
            var newnode = document.createElement("div");
            newnode.innerHTML = "a";
            divlist.appendChild(newnode);
        }
    btn.addEventListener("click",vivi());

}

解决方案

把 btn.addEventListener('click', vivi()); 改成

btn.addEventListener('click', vivi);

element.addEventListener参数是这样的

element.addEventListener(event, function, useCapture)

第二个参数是一个function对象，或者说是引用，vivi()是调用该函数的意思。
所以你的代码实际上是 btn.addEventListener('click', undefined);
因为vivi()方法调用后没返回任何东西

你可以试下

var forFun = function() {
    return function() {
        console.log('fun 233333');
    };
};
btn.addEventListener('click', forFun())

多试下就会明白了

这篇关于javascript - 为什么这段代码click事件监听无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！