将 Javascript 与 HTML 分开

Question

在 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>

Answer 1

您可以在 javascript 文件上执行类似的操作：

document.getElementById("guess_btn").onclick = function() {guessNumber()};

function guessNumber() {
    ......
}

然后对其他事件执行相同的操作。

希望对您有所帮助。

Answer 2

您可以使用 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);

等...

Answer 3

在这种情况下，如果您想将 "onclick" 等事件添加到您的 javascript 文件中，而不是只在 HTMl 中编码该事件，您可以在 javascript 中使用事件 handler/listener。本质上，您在将执行操作的对象上设置一个侦听器，然后您将处理执行该操作后要执行的操作。

查看 this 上一个问题。

希望对您有所帮助！

Answer 4

没问题，您首先必须访问要操作的元素。我建议使用 jQuery，它使 DOM-Manipulation 方式对于初学者来说更容易理解。

所以：获取 jQuery here 并将其放入您的网络服务器，以便可以找到它。在你的 HTML 中引用它，像这样：

<script type="application/javascript" src="js/jquery-1.11.2.js"></script>

如果您在 jquery 之后加载您的 javascript-文件，您应该可以访问 jQuery-Object ($).

（现在的一切，都应该写在你的js文件中）

第二个任务：初始化。要正确初始化您的代码，您必须确保网站上的所有内容都已加载。这是通过等待特定事件（绑定到 document 的 ready 事件）来完成的。

$(document).on('ready', function(){
   // here goes the init-code
});

on(...)-Statement 中的函数称为回调，在事件触发后进行计算。

您可以通过 id 属性访问您的元素。例如。 $('#input_txt') 引用 ID 为 'input_txt' 的输入元素。 $ 是 jQuery-Object，而 '#input_txt' 是所谓的选择器。选择器可以明确地引用元素。

最后，这是您真正想要的：操纵事件，绑定到您的特定元素。这是通过 jQuery-方法 'on' 完成的。我们使用它来等待文档处于 'ready' 状态。现在我们用它来等待特定元素上的特定事件。

每次单击元素时，都会触发 'click'-事件。 'keyup' 和 'keydown' 等效，如果用户按下或释放键盘，当焦点位于元素上时，将触发事件。请记住：如果事件被触发并且回调函数（在此上下文中通常称为 'Handler'）绑定到它，将评估相应的函数。

$(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();
   });
});

将 Javascript 与 HTML 分开

Separating Javascript from HTML

html

javascript

onclick