程序作用是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);
不是
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())
多试下就会明白了
把vivi()的括号去掉,效果参见:http://www.jscssshare.com/#/sample/onFQ5rpy
btn.addEventListener("click",vivi());
第二个参数返回的是undefined,而这个参数需要的是一个函数引用,而不是一个函数运行后的返回值,
当然你也可以在函数里面返回函数,@hwencc回答的很详细
btn.addEventListener('click', forFun())
这段代码中,回调函数加了括号相当于直接执行了forFun,而forFun这个函数又没有返回一个函数,所以addEventListener这个方法的第二个参数相当于没有传对,最后便挂掉了
vivi去掉括号