Event listener - click and mouseover?

Question

So basically I am trying to put together some simple event listeners. I've added a button with the ID of "btn" in my HTML file, and basically I want to add a mouseover event, and a click event. I know how to do this, however I want to alert when each event occurs. Is there a way to neaten my code and put this all into one function instead of two? I'm just not sure how I would create two separate alert statements otherwise on the same button. Thanks!

separately define the function e.g. `function doSomething() { /* do stuff */}` and then use `doSomething` (no quotes, no parens) as the 2nd arg to `.addEventListener` — CrayonViolent, Aug 12 '15 at 00:45
are you trying to combine the event listeners into one like `addEventListener('mouseover click', ...)` or are you trying to consolidate the executable code like @CrayonViolent suggested? — Deryck, Aug 12 '15 at 00:53
[**multiple event listeners/handlers on the same element**](http://stackoverflow.com/a/5411130/4273446) — Dyrandz Famador, Aug 12 '15 at 01:21
All I want to do is simply have separate alerts for each event. So a pop up alert for the mouseover, and a pop up for the click event on the same button. :) I have already done that, but I put them into separate functions as I wasn't sure how to put two alerts within the same function for two separate things. Thanks — user3247128, Aug 12 '15 at 01:51

score 1 · Answer 1 · answered Aug 12 '15 at 00:53

You can define a single function and then reference it as the 2nd argument to .addEventListener.

Example:

<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

score 0 · Answer 2 · answered Aug 12 '15 at 01:30

Maybe this will help?

The code below can be improved by adding another argument to determine add/remove, turning the two functions into one, but you get the idea.

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

score -1 · Answer 3 · answered Aug 12 '15 at 00:54

-1

I think this is what you want:

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

After you can call it like this:

Myfunc("click");

answered Aug 12 '15 at 00:54

Giacomo Cerquone

2,352
5
24
33

Sorry at this point I didn't understand his question... And neither did you as I understood. I thought he just wanted to keep the code neat using only one function to call on mouseover and on click. – Giacomo Cerquone Aug 12 '15 at 01:04

Event listener - click and mouseover?

3 Answers3

Maybe this will help?