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

Question

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

但是，我无法让它在外部文件中工作。 我是否需要定义一个 onclick 函数——HTML5 中已经预设的东西？

Answer 1

这是如何完成的简单方法：

外部.js ：

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

索引.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)
})

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”是您可以在 html 中分配的 ID

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

问题描述

2 个解决方案

解决方案1
1 2018-03-10 18:49:00

解决方案2
1 2018-03-10 18:50:21

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

问题描述

2 个解决方案

解决方案1 1 2018-03-10 18:49:00

解决方案2 1 2018-03-10 18:50:21

解决方案1
1 2018-03-10 18:49:00

解决方案2
1 2018-03-10 18:50:21