Question

我在输入上设置了2个事件监听器。我试图在第一个上传递一个变量，所以我可以在我的代码的其他区域重用该函数，但它不起作用。我重新创建它没有变量，它工作正常。有人可以告诉我发生了什么事吗？

<div id="t1">
   Not working -  <input class="font" id="font1"></input>
    </div>

<div id="t2">
   Working - <input class="font" value="pork" id="font2"></input>
    </div>

JS -     
var change = document.getElementById('font1');
var change2 = document.getElementById('font2');

function draw(variable) {
    console.log(variable);
    var font = document.getElementById(variable).getElementsByClassName("font")[0].value;
    console.log(change.value);
}

function draw2() {
    console.log(change2.value);
}

change.addEventListener("input", draw('t1'));
change2.addEventListener("input", draw2);

https://jsfiddle.net/5mk18ou1/2/

由于

Answer 1

你不能这样做：

change.addEventListener("input", draw('t1'));

你必须给addEventListener提供一个函数（它们不会把它称之为回调函数），所以像这样的东西

change.addEventListener("input", function(event) {
     draw('t1');
});

Answer 2

您需要将函数引用传递给addEventListener。你正在做的是传递调用draw('t1')的结果。

您可以传递匿名函数，也可以使用bind预先设置参数

// anonymous function
change.addEventListener("input", function() { draw('t1'); });

或

// use bind
change.addEventListener("input", draw.bind(this,'t1'));

https://jsfiddle.net/5mk18ou1/3/

演示

Answer 3

更改

change.addEventListener("input", draw('t1'));

到

change.addEventListener("input", function(){ draw('t1'); });

所以你可以调用一个匿名函数，它可以将变量传递给draw()。

Answer 4

如果你想要当前值，为什么要传递变量呢？

试试这个：

＆＃13;

var change = document.getElementById('font1');
var change2 = document.getElementById('font2');

function draw() {
    var font = this.value;
    alert(this.value)
}

change.addEventListener("input", draw);
change2.addEventListener("input", draw);

＆＃13;

<div id="t1">
   Not working -  <input class="font" id="font1"></input>
    </div>

<div id="t2">
   Working - <input class="font" value="pork" id="font2"></input>
    </div>

＆＃13;

addEventListener仅在页面加载时运行函数javascript

4 个答案: