Javascript AddEventListener（单击）在页面加载时激发_Javascript_Html_Javascript Events

Javascript AddEventListener（单击）在页面加载时激发

javascript html

Javascript AddEventListener（单击）在页面加载时激发,javascript,html,javascript-events,Javascript,Html,Javascript Events,我可能。。。现在，但为什么当我的页面加载时，这段代码会记录hello x2，而在单击LI元素时却什么都没有？它应该记录单击的元素名称。如果我把“你好”改成e.target，它会记录HTMLDocument 多谢各位 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-

我可能。。。现在，但为什么当我的页面加载时，这段代码会记录hello x2，而在单击LI元素时却什么都没有？它应该记录单击的元素名称。如果我把“你好”改成e.target，它会记录HTMLDocument

多谢各位

<!DOCTYPE html>
<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript">

            window.onload = function(){
                var list = document.getElementById("listan");

                list.addEventListener("touchstart", elementClicked(event), false);
                list.addEventListener("click", elementClicked(event), false);
            }

            function elementClicked(e) {

                console.log("hello");

                if(e.target && e.target.nodeName == "LI") {

                    console.log(e.target.nodeName);
                }

            }

        </script>


        <style>

            * {
                list-style: none;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            li {
                width: 90%;
                background: darkblue;
                color: #eee;
                margin: 10px auto;
                padding: 15px;
                border: 1px solid black;
                text-align: center;
                font-family: calibri;
                cursor: pointer;
            }
            ul {
                background: green;
                padding: 10% 0;
            }

        </style>

    </head>
    <body>
        <ul id="listan">
            <li>apa</li>
            <li>häst</li>
            <li>ko</li>
            <li>elefant</li>
            <li>lejon</li>
            <li>zebra</li>
            <li>myrslok</li>
            <li>grävling</li>
        </ul>
    </body>
</html>


window.onload=函数（）{
var list=document.getElementById（“listan”）；
list.addEventListener（“touchstart”，元素单击（事件），false）；
list.addEventListener（“单击”，元素单击（事件），false）；
}
功能元素单击（e）{
console.log（“你好”）；
if（e.target&&e.target.nodeName==“LI”）{
console.log（e.target.nodeName）；
}
}
* {
列表样式：无；
保证金：0；
填充：0；
框大小：边框框；
}
李{
宽度：90%；
背景：深蓝色；
颜色：#eee；
利润率：10px自动；
填充：15px；
边框：1px纯黑；
文本对齐：居中；
字体系列：calibri；
光标：指针；
}
保险商实验室{
背景：绿色；
填充：10%0；
}

apa
häst
高
elefant
莱容
斑马
迈尔斯洛克
格里夫林

对于这些：

list.addEventListener("touchstart", elementClicked(event), false);
list.addEventListener("click", elementClicked(event), false);

您希望传入实际函数，

element单击

，因此只需使用：

list.addEventListener("touchstart", elementClicked, false);
list.addEventListener("click", elementClicked, false);

对于这些：

list.addEventListener("touchstart", elementClicked(event), false);
list.addEventListener("click", elementClicked(event), false);

您希望传入实际函数，

element单击

，因此只需使用：

list.addEventListener("touchstart", elementClicked, false);
list.addEventListener("click", elementClicked, false);

很好，谢谢！但是为什么我不发送带有函数的事件呢？如果我想在函数中发送另一个变量，会发生什么呢？

addEventListener

函数调用您用一个参数（事件）给它的函数。您不需要“使用函数发送事件”。如果要发送另一个变量，必须使用lambda函数或返回另一个函数的函数。谢谢！但是为什么我不发送带有函数的事件呢？如果我想在函数中发送另一个变量，会发生什么呢？

addEventListener

函数调用您用一个参数（事件）给它的函数。您不需要“使用函数发送事件”。如果要发送另一个变量，则必须使用lambda函数或返回另一个函数的函数。