onclick 属性与脚本中的 onclick答案

【问题标题】：onclick attribute vs onclick in scriptonclick 属性与脚本中的 onclick
【发布时间】：2017-12-08 04:14:39
【问题描述】：

为什么不一样？

document.getElementById('click').onclick = a.replaceChild(c,b) --- 无需我点击按钮即可替换元素

但是 onclick="a.replaceChild(c,b)" --- 只有在按钮被点击后才会替换元素

<div id="container">
<p id="welcome">no greetings yet</p>
<p id="products">oreo ice-cream</p>
</div>

<button id="click" **onclick="a.replaceChild(c,b)"**>CHANGE</button>

    <script>

        var a = document.getElementById('container');

        var b = document.getElementById('welcome');

        var c = document.createElement('h2');
        c.id = 'new';
        c.innerHTML = "WELCOME";

        **document.getElementById('click').onclick = a.replaceChild(c,b);**

    </script>

【问题讨论】：

因为你调用了该方法，它返回的内容被分配给了事件监听器...
这里的onclick="a.replaceChild(c,b) 是什么？
replaceChild() 是一个在容器 div (a) 上调用的 JavaScript 函数。它将b 替换为c，这意味着<p id="welcome">..</p> 替换为<h2 id="new">...</h2>
Html onclick attribute vs script's onclick event listener的可能重复
这能回答你的问题吗？ addEventListener vs onclick

标签： javascript jquery html onclick

【解决方案1】：

"document.getElementById('click').onclick" 只是在该行运行时返回 onClick 状态。可能在页面加载时。

您要做的是添加一个event listener，它将在.onclick 状态下监听更改。然后用它调用你的函数。

这就是 onClick 属性的作用。通常建议使用事件侦听器，这样您就可以清楚地将内容与 JS 逻辑分开。

【讨论】：

【解决方案2】：

您不包括括号：您将分配像document.getElementById('foo')=bar; 这样的无参数函数，而不是像bar()。

您现在分配它的方式实际上是在运行它，这意味着您分配的是该函数的返回值，而不是它的名称。

参数使得它比仅仅命名没有括号的函数稍微复杂一些。

document.getElementById("click").onclick = function(c, b){return a.replacechild(c,b);}

这将满足您的需求。 JSFiddle

如果您对不是纯基本 javascript 的解决方案感兴趣，jQuery 的 .click() 是一个不错的选择。另一个可能是adding an event listener 而不是in some cases。

【讨论】：