Question

我发现了关于传递变量的类似问题，但没有关于传递这个问题。

我正在尝试根据表单的输入创建一个div，然后附加一个事件监听器，调用一个需要将其传递给它的事件。我已经达到创建div的程度，并根据输入的数据添加内容。所以现在我正在尝试使用.addEventListener添加onClick事件，但看起来你无法通过匿名函数传递它。这是我正在尝试的代码。

  element.addEventListener("click", function(this){selectActiveCompetitor(this)});

sekectActiveCompetitor依赖于传递给它，因此它可以定位正确的div

这有什么解决方案吗？

Answer 1

继上面的评论之后，这里有一个自动访问我所提及的this关键字的示例。单击任何按钮将导致该特定按钮上的文本被警告。

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}

function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    forEachNode( allByTag('button'), function(curNode, curIndex, nodeList){ curNode.addEventListener('click', onBtnClick, false); } );
}
/*
// expanded version of the above function
//
function onDocLoaded()
{
    var btns = allByTag('button');
    forEachNode(btns, attachBtnHandler);

    function attachBtnHandler(curNode, curIndex, nodeList)
    { 
        curNode.addEventListener('click', onBtnClick, false); 
    } 
}
*/


function onBtnClick(evt)
{
    alert(this.textContent);
}
</script>
<style>
</style>
</head>
<body>
    <button>This is btn1</button>
    <button>This is btn2</button>
    <button>This is btn3</button>
</body>
</html>

将事件侦听器添加到动态创建的div，并将其传递给它

1 个答案: