Javascript：警報顯示多次

Question

關於此還有其他線程，但不適用於我的上下文。

像：警報返回多次

為什么我的警報顯示多次？

我正在學習JS。

目標：

1.-在加載頁面上詢問您的名字。

2.-在單擊按鈕時，它應該返回：“你好[名稱]。今天是[日期/年]”。

它正確地完成了工作，但是當我單擊按鈕時：

a）第一次：我只看到一個警報。
b）第二次：我看到兩個警報。
c）開啟時間：我看到三個警報。
d）依此類推。

我已經等待頁面加載，等等。我不知道為什么會這樣（Chrome和Firefox上的最新版本相同）。

我的代碼：

JS：

document.addEventListener("click", myFunction);

function myFunction() {
    btn1 = document.getElementById("mybtn")
    btn1.addEventListener("click", function () {alert(messageParts.join(""));}, false);

}


function getMonthName(index) {
  var months = ["January", "February", "March",
    "April", "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];
  return months[index];
}


function abbrName(text) {
  return text.substr(0, 3);
}

var date = new Date();

var messageParts = [
  "Hello, ",
  prompt("Please, enter your name", "Please, enter your name"),
  ". Today is ",
  date.getDate(),
  " ",
  abbrName(getMonthName(date.getMonth())),
  " ",
  ", ",
  date.getFullYear()
];

HTML

<!doctype HTML>

<html lang="es">
    <div id="headerr">
    <head>
        <meta charset="utf-8">
        <link href="website.css" rel="stylesheet"/>
        <script type="text/javascript" src="stack.js"></script>
    </head>
    </div>
    <body>

        <article>
          <h1>Función User's name and date</h1>
          <p>Nombre y fecha del día</p>
          <section>
            <button id="mybtn">Click to enter your name !</button>
          </section>
        </article>
    </body>
</html>

Answer 1

您將添加一個新的事件偵聽器，該事件偵聽器在您每次單擊按鈕時都會調用該動作。

編輯：

這是您的代碼的jsfiddle： http : //jsfiddle.net/L707ak04/

這是一個簡單的新版本： http : //jsfiddle.net/L707ak04/1/

簡單地做：

btn1 = document.getElementById("mybtn")
btn1.addEventListener("click", function () {alert(messageParts.join(""));}, false);

而不在事件監聽器中調用它。

Answer 2

您將一個函數綁定到document上的click事件，並且在該函數中，您將另一個處理程序綁定到按鈕的click事件。

這意味着每次您單擊文檔（包括文檔對象的任何子對象，如按鈕）時，您都將添加一個新的偵聽器，並且綁定到該對象上的事件的所有偵聽器都將在觸發該事件時觸發。

因此，當您第一次單擊該頁面時，該按鈕上已添加了一個偵聽器，而當您單擊該按鈕以觸發警報時，您將添加第二個偵聽器。 第二次單擊時，它將觸發這兩個處理程序函數，並綁定第三個處理函數，依此類推。

這是一個演示，向您顯示您已綁定到按鈕的聽眾人數。 每當您在頁面上的任意位置（包括按鈕上）單擊時，它都會上升，因此您可以確切地看到多少次alert 。

另請注意，在數組中創建函數調用（如prompt() ）將在創建數組后立即執行它們。 在您的代碼中，頁面加載后即立即創建該數組。 你想要做什么是創建處理程序按鈕內部數組，所以用戶只點擊該按鈕后要求輸入他們的名字：

var btn1 = document.getElementById("mybtn")
btn1.addEventListener("click", function () {
    var date = new Date();
    var messageParts = [
        "Hello, ",
        prompt("Please, enter your name", "Please, enter your name"),
        ". Today is ",
        date.getDate(),
        " ",
        abbrName(getMonthName(date.getMonth())),
        " ",
        ", ",
        date.getFullYear()
    ];

    alert(messageParts.join(""));
}, false);

演示

Javascript：警報顯示多次

問題描述

2 個解決方案

解決方案1
2 2015-08-11 22:01:15

解決方案2
2 已采納 2015-08-11 22:10:07

Javascript：警報顯示多次

問題描述

2 個解決方案

解決方案1 2 2015-08-11 22:01:15

解決方案2 2 已采納 2015-08-11 22:10:07

解決方案1
2 2015-08-11 22:01:15

解決方案2
2 已采納 2015-08-11 22:10:07