addEventListener 运行仅在页面加载时起作用 javascript

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

改变

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

至

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

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

Answer 3

您需要将函数引用传递给 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 4

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

试试这个：

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);

<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>

addEventListener 运行仅在页面加载时起作用 javascript

addEventListener is running function on page load only javascript

javascript

input

function

addeventlistener

addEventListener 运行 仅在页面加载时起作用 javascript

addEventListener is running function on page load only javascript

javascript

input

function

addeventlistener

addEventListener 运行仅在页面加载时起作用 javascript