Question

在DIV中有js喜欢：onclick，onkey down等。如何在不丢失功能的情况下在新的javascript文件上进行设置。我已经有了一个外部的js文件。我想添加＆＃39; onclick＆＃39;在那里的东西。但我不知道该怎么做，并让它发挥作用。

有人可以帮助我吗？

＆＃13;

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

＆＃13;

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中使用事件处理程序/侦听器。实际上，您在对象上设置了一个侦听器，该侦听器将执行该操作，然后您将处理执行该操作后要执行的操作。

查看this上一个问题。

我希望这有帮助！

Answer 4

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

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

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

如果你在jquery之后加载你的javascript文件，你应该有权访问jQuery-Object（$）。

（现在出现的所有内容都应该写在你的js文件中）

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

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

on（...）中的函数 - Statement被称为回调，并在触发事件后进行评估。

您可以通过id-attribute访问您的元素。例如。 $('#input_txt')引用了带有id的输入元素：＆＃39; input_txt＆＃39;。 $是jQuery-Object，'#input_txt'是所谓的选择器。选择器可以明确地引用Elements。

最后，这是你真正想要的东西：操纵事件，绑定到你的特定元素。这是通过jQuery-Method＆＃39;来完成的。我们使用它，等待文档处于准备好的状态。现在我们使用它来等待特定元素上的特定事件。

每次点击元素时，都会触发＆＃39;点击＆＃39; -Event。＆＃39; KEYUP＆＃39;和＆＃39; keydown＆＃39;等效地工作，当焦点在元素上时，如果用户按下或释放键盘，则触发事件。请记住：如果事件被触发并且回调函数（在此上下文中通常称为“处理程序”）被绑定，则将评估相应函数。

$(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分开

4 个答案: