Home >Web Front-end >JS Tutorial >Detailed explanation of js event listener usage examples_javascript skills

Detailed explanation of js event listener usage examples_javascript skills

WBOYOriginal: 2016-05-16 15:57:131280browse

The example in this article describes the usage of js event listener. Share it with everyone for your reference. The specific analysis is as follows:

1. When the same object uses the .onclick writing method to trigger multiple methods, the latter method will overwrite the previous method. That is to say, when the onclick event of the object occurs, only the last binding will be executed. method. With event listening, there will be no overwriting, and each bound event will be executed. As follows:

window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.onclick = function(){ 
    alert("第一个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第二个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第三个事件"); 
  } 
}

In the end, only the third event is output, because the latter method overwrites the previous method.

Original event binding function addEventListener:

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  //addEventListener：绑定函数 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
}

Output: the first listening event and the second listening event

2. After using event monitoring to bind methods to objects, you can unbind the corresponding binding. The writing is as follows:

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
  btn.removeEventListener("click",eventOne); 
}

Output: Second listening event

3. When unbinding an event, you must use the handle of the function. Writing the entire function will not unbind it.

Wrong spelling:

btn.addEventListener("click",function(){ 
  alert(11); 
}); 
btn.removeEventListener("click",function(){ 
  alert(11); 
});

Correct writing:

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

Summary: The listening events after encapsulating the function are as follows, compatible with all major mainstream browsers.

/* 
 * addEventListener:监听Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function addEventHandler(target,type,func){ 
  if(target.addEventListener){ 
    //监听IE9，谷歌和火狐 
    target.addEventListener(type, func, false); 
  }else if(target.attachEvent){ 
    target.attachEvent("on" + type, func); 
  }else{ 
    target["on" + type] = func; 
  }  
} 
/* 
 * removeEventHandler:移除Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function removeEventHandler(target, type, func) { 
  if (target.removeEventListener){ 
    //监听IE9，谷歌和火狐 
    target.removeEventListener(type, func, false); 
  } else if (target.detachEvent){ 
    target.detachEvent("on" + type, func); 
  }else { 
    delete target["on" + type]; 
  } 
} 
var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var bindEventBtn = document.getElementById("bindEvent"); 
  //监听eventOne事件 
  addEventHandler(bindEventBtn,"click",eventOne); 
  //监听eventTwo事件 
  addEventHandler(bindEventBtn,"click",eventTwo ); 
  //监听本身的事件 
  addEventHandler(bindEventBtn,"click",function(){ 
    alert("第三个监听事件"); 
  }); 
  //取消第一个监听事件 
  removeEventHandler(bindEventBtn,"click",eventOne); 
  //取消第二个监听事件 
  removeEventHandler(bindEventBtn,"click",eventTwo); 
}

Example:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Event</title> 
    <script type="text/javascript"> 
      function addEventHandler(target,type,func){ 
        if(target.addEventListener){ 
          //监听IE9，谷歌和火狐 
          target.addEventListener(type, func, false); 
        }else if(target.attachEvent){ 
          target.attachEvent("on" + type, func); 
        }else{ 
          target["on" + type] = func; 
        }  
      } 
      function removeEventHandler(target, type, func) { 
        if (target.removeEventListener){ 
          //监听IE9，谷歌和火狐 
          target.removeEventListener(type, func, false); 
        } else if (target.detachEvent){ 
          target.detachEvent("on" + type, func); 
        }else { 
          delete target["on" + type]; 
        } 
      } 
      var eventOne = function(){ 
        alert("第一个监听事件"); 
      } 
      function eventTwo(){ 
        alert("第二个监听事件"); 
      } 
      window.onload = function(){ 
        var bindEventBtn = document.getElementById("bindEvent"); 
        //监听eventOne事件 
        addEventHandler(bindEventBtn,"click",eventOne); 
        //监听eventTwo事件 
        addEventHandler(bindEventBtn,"click",eventTwo ); 
        //监听本身的事件 
        addEventHandler(bindEventBtn,"click",function(){ 
          alert("第三个监听事件"); 
        }); 
        //取消第一个监听事件 
        removeEventHandler(bindEventBtn,"click",eventOne); 
        //取消第二个监听事件 
        removeEventHandler(bindEventBtn,"click",eventTwo); 
      } 
    </script> 
  </head> 
  <body> 
    <input type="button" value="测试" id="bindEvent"> 
    <input type="button" value="测试2" id="yuanEvent"> 
  </body> 
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How jquery reads xml files to realize three-level linkage of provinces, cities and counties_jqueryNext article：How jquery reads xml files to realize three-level linkage of provinces, cities and counties_jquery

See more

Detailed explanation of js event listener usage examples_javascript skills

Related articles