事件监听器-单击和鼠标悬停?

问题描述 投票:0回答:4

所以基本上,我试图将一些简单的事件侦听器组合在一起。我在HTML文件中添加了一个ID为“ btn”的按钮,基本上我想添加一个mouseover事件和一个click事件。我知道该怎么做,但是我想在每个事件发生时发出警报。有没有办法整理我的代码并将其全部放入一个函数而不是两个函数中?我只是不确定如何在同一按钮上创建两个单独的警报语句。谢谢!enter image description here

javascript
4个回答
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 DEMO


0
投票

也许这会有所帮助吗?

下面的代码可以通过添加另一个参数来确定添加/删除,将这两个功能合而为一,来改进,但是您明白了。

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

-1
投票

我认为这是您想要的:

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

您可以这样称呼它之后:

Myfunc("click");
© www.soinside.com 2019 - 2024. All rights reserved.