multiple events on same javascript event listener code example
Example 1: how to add multiple event listener in javascript
// events and args should be of type Array
function addMultipleListeners(element,events,handler,useCapture,args){
if (!(events instanceof Array)){
throw 'addMultipleListeners: '+
'please supply an array of eventstrings '+
'(like ["click","mouseover"])';
}
//create a wrapper to be able to use additional arguments
var handlerFn = function(e){
handler.apply(this, args && args instanceof Array ? args : []);
}
for (var i=0;i<events.length;i+=1){
element.addEventListener(events[i],handlerFn,useCapture);
}
}
function handler(e) {
// do things
};
// usage
addMultipleListeners(
document.getElementById('first'),
['touchstart','click'],
handler,
false);
Example 2: multiple event with javascript
/* get the button id "tg" which is used for toggling.Then on click few
elements with classname "adv" will disappear and at the same time few elements
with classname "btnpro" will increase in width to 80px*. Upon second click
elements with "adv" will appear again and the button width changes to 60px*/
document.getElementById("tg").onclick = function ()
{
my_fun1();
my_fun2();
}
function my_fun1()
{
var x = document.getElementsByClassName("adv")
for(var i=0; i<x.length;i++) {
if (x[i].style.display === "none") {
x[i].style.display = "block"
flag = false
} else {
x[i].style.display = "none"
flag = true
}
}
}
function my_fun2()
{
var x = document.getElementsByClassName("btnpro")
for(var i=0; i<x.length;i++) {
if(flag){
x[i].style.width = "80px";
}else{
x[i].style.width = "60px";
}
}
}