事件偵聽器 - 單擊和鼠標懸停？

Question

所以基本上我想把一些簡單的事件監聽器放在一起。 我在 HTML 文件中添加了一個 ID 為“btn”的按鈕，基本上我想添加一個鼠標懸停事件和一個點擊事件。 我知道如何做到這一點，但是我想在每個事件發生時發出警報。 有沒有辦法整理我的代碼並將它們全部放入一個函數而不是兩個函數中？ 我只是不確定如何在同一個按鈕上創建兩個單獨的警報語句。 謝謝！

Answer 1

您可以定義單個函數，然后將其作為.addEventListener的第二個參數引用。

例子：

<button id='btn' value='some button'>some button</button>

<div id='placeholder'></div>

<script>
(function() {
    var btn = document.getElementById("btn");
    btn.addEventListener("click",doSomething,false);
    btn.addEventListener("mouseover",doSomething,false);
})();
function doSomething(e) {
  // example: update the div with the event type
  var p=document.getElementById("placeholder");
  p.innerHTML=e.type;
}
</script>

JSFIDDLE 演示

Answer 2

也許這會有所幫助？

下面的代碼可以通過添加另一個參數來確定添加/刪除，將兩個函數合二為一來改進，但你明白了。

 (function() { var btn = document.getElementById("btn"); addEvent(btn, "click mouseover", handler); function handler ( event ) { alert("This is the " + event.type + " handler."); } })(); function addEvent ( element, event, fnc ) { var events = event.split(/\\s/), evt = ""; while ( evt = events.shift() ) { ((element.addEventListener) ? element.addEventListener(evt, fnc, false) : element.attachEvent("on" + evt, fnc)); } } function removeEvent ( element, event, fnc ) { var events = event.split(/\\s/), evt = ""; while ( evt = events.shift() ) { ((element.removeEventListener) ? element.removeEventListener(evt, fnc, false) : element.detachEvent("on" + evt, fnc)); } }

 <button id="btn" type="button">Click or Hover</button>

Answer 3

我認為這就是你想要的：

var myfunc =  function(event) {
  var btn...
  btn.addEventListener(event, function()...
}

在你可以這樣調用它之后：

Myfunc("click");