如何将 JavaScript 中的 onclick 事件从内联脚本传输到外部文件？答案

【问题标题】：How do I transfer an onclick event in JavaScript from the inline script to an external file?如何将 JavaScript 中的 onclick 事件从内联脚本传输到外部文件？
【发布时间】：2018-03-11 03:00:31
【问题描述】：

内联脚本有效，我只需要使用 onclick='document.getElementById("").innerHTML

但是，我无法让它在外部文件中工作。我需要定义一个 onclick 函数吗？在 HTML5 中预设？

【问题讨论】：

提供一些代码示例。
How to use external ".js" files的可能重复
我第一次尝试将代码放入其中没有成功。我只是想将 W3 学校的内联代码放入外部文件中：
这可能与页面加载顺序有关。如果您的外部脚本在元素存在之前加载，它将引发错误。要么将代码包装在 DOMContentLoaded 处理程序中，要么将脚本标记放在它使用的元素之后。

标签： javascript onclick

【解决方案1】：

如果要在外部 js 文件中定义事件处理程序，语法如下：

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

其中 'myBtn' 是您可以在 html 中分配的 id

【讨论】：

【解决方案2】：

这里有一个简单的方法：

external.js：

function myFancyOnClickHandler() {
     document.getElementById('something').innerHTML = 'something'
}

index.html：

<!DOCTYPE HTML>
<html>
<head>
    <script src="external.js"></script>
</head>
<body>
    <div id="something" onclick="myFancyOnClickHandler()">Hello, World</div>
</body>
</html>

也可以像这样使用addEventListener 动态添加事件监听器（这样就不需要onload="" 属性）：

function myFancyOnClickHandler() {
     document.getElementById('something').innerHTML = 'something'
}

// This only works IFF the element is present in the DOM
document.getElementById('something').addEventListener('click', myFancyOnClickHandler)

我们可以监听window 的load 或DOMContentLoaded 事件以确保DOM 已加载：

function myFancyOnClickHandler() {
     document.getElementById('something').innerHTML = 'something'
}

// This will work regardless of where we include the .js file
window.addEventListener('load', function() {
    var elem = document.getElementById('something')

    elem.addEventListener('click', myFancyOnClickHandler)
})

【讨论】：