Summary of four ways to pass parameters to event response function

Source: Internet
Author: User

      This article mainly introduces four ways of passing parameters to event response functions. Need friends can come to the reference, I hope to help you.

      How to pass parameters to event handler? When it comes to JavaScript, the problem is often tangled up by the lack of understanding of closures.   In the discussion group often encountered such a problem, the following   code is as follows: <! DOCTYPE html> <html> <head>     <meta charset= "Utf-8" >     <title> How do I pass arguments to an event handler? </title> </head> <body>  <a href= "#" id= "AA" >click me</a>  <script " Text/javascript ">   var E = {   on:function (el, type, fn) {    El.addeventlistener?      el.addeventlistener (Type, FN, false):      el.attachevent ("on" + Type, fn);   &NBSP},    un:function (EL,TYPE,FN) {    El.removeeventlistener?      el.remo Veeventlistener (Type, FN, false):      el.detachevent ("on" + Type, fn);      }  };     var v1 = ' Jack ', V2 = ' Lily ';         function handler (ARG1,ARG2) {   alert (arg1);    alert (ARG2);  } &NBsp  //How to pass the parameter v1,v2 to handler?  //The default event object will be passed in as the first parameter of the handler,  //Then click the link the first pop-up is the event object, and the second is undefined.       E.ON (document.getElementById (' AA '), ' click ', handler);  </script> </body> </html>   How to pass the parameter v1,v2 to handler? The default event object will be passed in as the first argument to the handler, when clicking the link the first pop-up is the event object, and the second is undefined.   Scheme One, the event object is not retained as the first parameter passed in       code as follows: function handler (ARG1,ARG2) { alert (arg1);  alert (arg2 ); E.ON (document.getElementById (' AA '), ' click ', Function () {   handler (ARG1,ARG2); });   Scenario two, keep event objects as the first parameter   code as follows: function handler (E,ARG1,ARG2) { alert (e);  alert (arg1);  alert ( ARG2); } E.ON (document.getElementById (' AA '), ' click ', Function (E) { handler (E,ARG1,ARG2);});   Scheme III, add Getcallback to Function.prototype, do not keep event object   code as follows: Function.prototype.getCallback = Function () {  var _this = this, args = arguments;    return function (e) {        return _this.apply (This | | wiNdow, args);    }; E.ON (document.getElementById (' AA '), ' click ', Handler.getcallback (V1,V2));   Scenario Four, add Getcallback to Function.prototype, keep event object passed as the first parameter in   code as follows: Function.prototype.getCallback = Function () { var _this = this, args = [];  for (var i=0,l=arguments.length;i<l;i++) {  Args[i+1] = arguments[i]; &n BSP;}  return function (e) {  Args[0] = e         return _this.apply (This | | window, args); &nbsp ;  }; E.ON (document.getElementById (' AA '), ' click ', Handler.getcallback (V1,V2));    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.