将Javascript与HTML分开
[英]Separating Javascript from HTML
问题描述
在DIV中有js，例如：onclick，onkey down等。如何在不丢失功能的情况下在新的javascript文件上进行设置。 我已经有一个外部js文件。 我想在其中添加“ onclick”内容。 但是我不确定如何做到这一点，以及如何使其发挥作用。
有人能帮我吗？
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="raad.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <div id="container"> <h1>Raad het goede nummer!</h1> <div id="message_txt"></div> <form id="userInput" name="userInput" method="post"> <input id="input_txt" name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,3);" onKeyUp="limitText(this.form.limitedtextfield,3);" maxlength="3"> <br /> <button id="guess_btn" type="button" onclick="guessNumber()">RAAD</button> <br /> <button id="playAgain_btn" type="button" onclick="initGame()">OPNIEUW</button> </form> </div> <script type="text/javascript" src="raad.js"></script> </body> </html>
4 个解决方案
解决方案1
1 2015-04-08 14:59:54
您可以在javascript文件中执行以下操作：
document.getElementById("guess_btn").onclick = function() {guessNumber()};
function guessNumber() {
......
}
然后对其他事件执行相同的操作。
我希望这有帮助。
解决方案2
1 已采纳 2015-04-08 15:04:25
您可以使用addEventListener将所有事件处理程序属性从HTML移到JS。
因此，例如：
<input id="input_txt" name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,3);" onKeyUp="limitText(this.form.limitedtextfield,3);" maxlength="3">
应该变成这个：
的HTML
<input id="input_txt" name="limitedtextfield" type="text" maxlength="3">
JS
var input_txt = document.getElementById('input_txt');
input_txt.addEventListener('keydown', function(e){
limitText(this.form.limitedtextfield,3);
});
input_txt.addEventListener('keyup', function(e){
limitText(this.form.limitedtextfield,3);
});
理想情况下，您可以对回调使用通用函数，如下所示：
function handleInputKeys() {
limitText(this.form.limitedtextfield,3);
}
然后只需：
input_txt.addEventListener('keyup', handleInputKeys);
下一个示例：
<button id="guess_btn" type="button" onclick="guessNumber()">RAAD</button>
应该：
的HTML
<button id="guess_btn" type="button">RAAD</button>
JS
var guess_btn = document.getElementById('guess_btn');
guess_btn.addEventListener('click', guessNumber);
等等...
解决方案3
0 2015-04-08 15:06:21
在这种情况下，如果您想将事件（例如“ onclick”等）添加到您的javascript文件中，而不必只在HTMl中编码该事件，则可以在javascript中使用事件处理程序/侦听器。 本质上，您将在将要执行该操作的对象上设置一个侦听器，然后在执行该操作后将处理该做什么。
看看这个前面的问题。
我希望这有帮助！
解决方案4
0 2015-04-08 15:18:22
没问题，您首先必须访问要操作的元素。 我建议使用jQuery，它使初学者更容易理解DOM操作。
因此： 在此处获取jQuery并将其放在您的网络服务器中，以便可以找到它。 在您的HTML中引用它，如下所示：
<script type="application/javascript" src="js/jquery-1.11.2.js"></script>
如果在jquery之后加载javascript文件，则应该有权访问jQuery-Object（$）。
（现在出现的所有内容都应该写在您的js文件中）
第二项业务：初始化。 要正确初始化代码，必须确保站点上的所有内容均已加载。 这是通过等待特定的事件来完成的（ ready -event wich绑定到document ）。
$(document).on('ready', function(){
// here goes the init-code
});
on（...）-Statement内部的函数称为回调，并在事件触发后进行评估。
您可以通过id属性访问元素。 例如$('#input_txt')引用id为'input_txt'的输入元素。 $是jQuery对象，而'#input_txt'是所谓的选择器。 选择器可以明确引用元素。
最后，这是您真正想要的事情：操作绑定到您特定元素的事件。 这是通过jQuery方法“ on”完成的。 我们使用它来等待文档处于“就绪”状态。 现在，我们使用它来等待特定元素上的特定事件。
每次您单击元素时，都会触发一个“单击”事件。 'keyup'和'keydown'等效，在这里，当焦点位于Element上时，如果用户按下或释放键盘，则会触发事件。 请记住：如果事件被触发并且回调函数（在此上下文中通常称为“处理程序”）已绑定，则将评估相应的函数。
$(document).on('ready', function(){
$('#input_txt').on('keydown', function({
limitText(this.form.limitedtextfield,3);
})
.on('keyup', function({
limitText(this.form.limitedtextfield,3);
});
$('#guess_btn').on('click', function({
guessNumber();
});
$('#playAgain_btn').on('click', function({
initGame();
});
});
在Polymer 2.0组件中将JavaScript与HTML分离的最佳实践
[英]Best Practice in separating javascript from HTML in Polymer 2.0 components
当通过javascript动态添加html时，分离Javascript和Html
[英]Separating Javascript and Html, when dynamically adding html via javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.