Question

内联脚本有效，我只需要使用onclick ='document.getElementById（“”）。innerHTML

但是，我不能让它在外部文件中工作。我是否需要定义一个onclick函数 - 已经有了在HTML5中预设？

Answer 1

这里有一个简单的方法：

<强> 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的{{1}}或load事件，以确保已加载DOM：

DOMContentLoaded

Answer 2

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

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

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

myBtn＆＃39;是您可以在html中分配的ID

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

2 个答案: