个人中心
gpt4 book ai didi

javascript - 为什么 addEventListener 在事件发生之前触发？

转载 作者：数据小太阳 更新时间：2023-10-29 04:33:37 28 4
gpt4 key购买 nike

<分区>

我正在试验 [在 jsfiddle 中] w/创建一个函数来附加一个新创建的 TextNode到 <p>在下面的 HTML 中:

    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

这也是我的 javascript:

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");

        p1.appendChild(newtext);
    }

这很好用。然而，当我试图通过从标记中删除行为来使我的 javascript 变得“不引人注目”时，问题就暴露出来了……

    <button>YES!</button>
    <button>NO!</button>
    <button>WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

然后利用循环附加addEventListener每个 <button>元素，它又使用子元素 TextNode调用addTextNode :

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");

        p1.appendChild(newtext);
    }

    var btns = document.getElementsByTagName("button");

    for(i = 0; i < btns.length; i++){
        var button = btns[i]; 
        button.addEventListener("click", addTextNode(button.innerHTML));
    }

我的代码发生了两件奇怪的事情:
当 [jsfiddle 的] Code Wrap设置为 'no wrap - in head'，没有任何反应。

然而，当Code Wrap设置为 'onLoad'、'onDomReady' 或 'no wrap - in body' 该函数在单击之前运行，我得到 this .

谁能告诉我我错过了什么？

28 4 0
文章推荐： javascript - Tinymce 如何 float 图像？
文章推荐： c# - 公共(public)常量字符串？
文章推荐： c# - ArgumentException 与 ArgumentNullException？
文章推荐： javascript - 如何更新 Angular 数组中的现有项(已在外部更改)？
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com