如何将 JavaScript 中的 onclick 事件从内联脚本传输到外部文件？
[英]How do I transfer an onclick event in JavaScript from the inline script to an external file?
问题描述
Inline script works, I just need to use onclick='document.getElementById("").innerHTML
内联脚本有效，我只需要使用 onclick='document.getElementById("").innerHTML
However, I cannot get it to work in an external file.但是，我无法让它在外部文件中工作。 Do I need to define an onclick function -- something already preset in HTML5?我是否需要定义一个 onclick 函数——HTML5 中已经预设的东西？
2 个解决方案
解决方案1
1 2018-03-10 18:49:00
Here a simple way of how it could be done:这是如何完成的简单方法：
external.js :外部.js ：
function myFancyOnClickHandler() {
document.getElementById('something').innerHTML = 'something'
}
index.html :索引.html ：
<!DOCTYPE HTML>
<html>
<head>
<script src="external.js"></script>
</head>
<body>
<div id="something" onclick="myFancyOnClickHandler()">Hello, World</div>
</body>
</html>
It's also possible to dynamically add an event listener with addEventListener like this (this way you don't need the onload="" attribute):也可以像这样使用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)
We can listen to the window 's load or DOMContentLoaded event to be sure the DOM has loaded:我们可以监听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)
})
解决方案2
1 2018-03-10 18:50:21
If you want to define the event handler in an external js file, this is the syntax:如果要在外部 js 文件中定义事件处理程序，则语法如下：
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
https://www.w3schools.com/jsref/met_element_addeventlistener.asp https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Where 'myBtn' is an id you can assign in html其中“myBtn”是您可以在 html 中分配的 ID
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.