Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > ASP.NET 4 General Discussion
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 4 General Discussion For ASP.NET 4 discussions not relating to a specific Wrox book
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 4 General Discussion section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old September 8th, 2015, 11:15 AM
Friend of Wrox
Points: 595, Level: 8
Points: 595, Level: 8 Points: 595, Level: 8 Points: 595, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Mar 2011
Posts: 126
Thanks: 39
Thanked 2 Times in 2 Posts
Default Adding multiple event handlers?

Hi,

I was wondering if there is a way to add multiple event handlers for an html select element.

So for example, if I have the following event handler, PopulateInformation() defined...

Code:
<select id="ddlCourse" runat="server" onchange="PopulateInformation()" style="display: none" />
Is there a way to add another event handler for ddlCourse that can be added while user is viewing a specific form and removed when user has exited this form?

Thank you.

Tulsi
Reply With Quote
  #2 (permalink)  
Old September 9th, 2015, 03:16 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,957
Thanks: 79
Thanked 1,556 Times in 1,533 Posts
Default

You could call multiple handlers by separating them by a semi colon:

onchange="PopulateInformation(); SomeOtherMethod()"

If you're using jQuery, look at http://api.jquery.com/one/ to set up a handler that only runs once and at http://api.jquery.com/on/ to set up regular handlers.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following 2 Users Say Thank You to Imar For This Useful Post:
LessardOlivia (December 28th, 2015), Tulsi (September 10th, 2015)
  #3 (permalink)  
Old September 10th, 2015, 11:58 AM
Friend of Wrox
Points: 595, Level: 8
Points: 595, Level: 8 Points: 595, Level: 8 Points: 595, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Mar 2011
Posts: 126
Thanks: 39
Thanked 2 Times in 2 Posts
Default

Thank you Imar - exactly the info I needed - very helpful!

Tulsi
Reply With Quote
  #4 (permalink)  
Old December 16th, 2015, 05:27 AM
Registered User
Points: 15, Level: 1
Points: 15, Level: 1 Points: 15, Level: 1 Points: 15, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2015
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default Hi,

We can add multiple event handlers in ASP.Net platform. For resolving this issue, we will use javascript code.

Javascript code :-

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Handler1(p1){alert('Handler1 called.['+p1+']');}
function Handler2(p1,p2){alert('Handler2 called.['+p1+' '+p2+']');}
</script>


Below is the code behind of the *.aspx file, code looks like this:

protected override void OnPreRender(EventArgs e)
{
StringBuilder sb = new StringBuilder();
string functionCall = "$('#{0}').bind('{1}', function(){{ {2} }});\n";

sb.Append(" $(window).bind('load',function(){\n");
sb.Append(string.Format(functionCall,TextBox1.Clie ntID,"click","Handler1('param1')"));
sb.Append(string.Format(functionCall, TextBox1.ClientID, "click", "Handler2('param1','param2')"));
sb.Append(string.Format(functionCall, TextBox2.ClientID, "click", "Handler1('param1')"));
sb.Append(string.Format(functionCall, TextBox2.ClientID, "click", "Handler2('param1','param2')"));
sb.Append ("});");
ClientScript.RegisterClientScriptBlock(this.GetTyp e(),"ClickHandlers",sb.ToString(),true);
base.OnPreRender(e);
}

The above code is helpful to attach a handler to the window.load event. Adding handlers for client-side 'click' event of TextBox1 and TextBox2.

Thanks!!
Reply With Quote
  #5 (permalink)  
Old December 28th, 2015, 09:37 AM
Registered User
Points: 18, Level: 1
Points: 18, Level: 1 Points: 18, Level: 1 Points: 18, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2015
Location: Toronto, ontario
Posts: 5
Thanks: 1
Thanked 0 Times in 0 Posts
Cool It is a good idea.

I would say that adding multiple event handlers is really a pretty good idea, as it would save us much important LOC.
Thank you.
Reply With Quote
  #6 (permalink)  
Old March 12th, 2016, 03:17 AM
Registered User
Points: 28, Level: 1
Points: 28, Level: 1 Points: 28, Level: 1 Points: 28, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Mar 2016
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

In JS, you don't really have control over what order the event handlers are called, but with carful delegation and well-placed listeners, it is possible.

Delegation is one of the most powerful features of the event model. As you may or may not know: in JS, an event is handed to the top of the dom, from where it propagates down to the element onto which the event should be applied. It stands to reason, therefore, that an event listener attached to the global object will call its handler prior to a listener that has been attached to the element itself.

window.addEventListener('click',function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
console.log('window noticed you clicked something');
console.log(target);//<-- this is the element that was clicked
}, false);//<-- we'll get to the false in a minute
It's important to note we actually have access to the event object in the handlers. In this case, we left the event object untouched, so it'll just continue to propagate down to the target, on its way down, it might meet with something like this:

document.getElementById('container').addEventListe ner('click', function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() !== 'a' || target.className.match(/\bclickable\b/))
{
return e;//<return the event, unharmed
}
e.returnValue = false;
if (e.preventDefault)
{
e.preventDefault();
}
}, false);
Now, this handler will be called after the listener @window level calls its helper. This time, the event is changed if the clicked element didn't have the clickable class, or the element is a link. The event is canceled, but it lives on, still. The event is still free to propagate further down the dom, so we might encounter something like:

document.getElmentById('form3').addEventListener(' click',function(e)
{
e = e || window.event;
if (e.returnValue === false || e.isDefaultPrevented)
{//this event has been changed already
//do stuff, like validation or something, then you could:
e.cancelBubble = true;
if (e.stopPropagation)
{
e.stopPropagation();
}
}
}, false);
Here, by calling stopPropagation, the event is killed of: it can't propagate further down the dom to its target, but only if the event was already altered, if not, the event object travels further down the DOM, as if nothing happened.
Once it reaches its target node, the event enters its second phase: the bubble phase. Instead of propagating down into the deeps of the DOM, it climbs back up, to the top level (all the way to the global object, where it was dispatched... from whence it came and all that).

In the bubble phase, all the same rules apply as in the propagation phase, only the other way around. The event object will encounter the elements that are closest to the target element first, and the global object last.

There's a lot of handy, and clear diagrams for this here. I can't put it any better than good 'ol quirksmode, so I suggest you read what they have to say there.

Bottom line: when dealing with 2 event listeners, attach them both on a different level to sort-of queue them the way you like.
If you want to guarantee both are called, only stop the event from propagating in that handler that will be called last.
When you've got two listeners, attached to the same element/object for the same event, I've never come across a situation where the listener that was attached first, wasn't also called first.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding Multiple Event to button in layered PopUp saqlain.abbas ASP.NET 1.0 and 1.1 Professional 1 June 28th, 2007 05:05 AM
Event handlers jwebb Visual Basic 2005 Basics 1 June 25th, 2007 09:44 PM
Event handlers does not work after some changes geetageetageeta ASP.NET 2.0 Basics 0 March 6th, 2006 04:19 AM
Using Multiple Event Handlers in Excel chp Excel VBA 4 February 15th, 2006 06:25 PM
Multiple event handlers for a single button monuindia2002 ASP.NET 1.0 and 1.1 Professional 1 October 17th, 2005 12:22 AM



All times are GMT -4. The time now is 01:40 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.