JavaScript is the most popular scripting language on the web, and run smoothly in all major browsers. In millions of web pages, it has being used to improve the design, validate forms, capture user activity and many other reasons. The main reason we add JavaScript to our pages is to have a richer interaction with our visitors. That's why, our pages definitely need event handler to interact with visitors.

Sample One: Direct Assignment

In this way, Just assign the function to the event that you want to involve. Assign null to remove it back. Please note, setAttribute method does not work in IE.
		
		function AttachEvent(attach){
			if(attach){
				document.getElementById('btnDelete').onclick = confirmDelete;
				//Doesn't work in IE
				document.getElementById('btnDelete2').setAttribute('onclick', 'confirmDelete()');
			}
			else{
				document.getElementById('btnDelete').onclick = null;
				document.getElementById('btnDelete2').onclick = null;
			}
		}
	
		function confirmDelete(){
			return confirm('Are you sure you want to delete?');
		}
		
	
		<input type="checkbox" id="chkConfirm" onclick="AttachEventSampleOne(this.checked)"/>Confirm before delete
		<input type="button" id="btnDelete" value="Delete" />
		<input type="button" id="btnDelete2" value="Delete 2" /><br/>
	

Confirm before delete


Sample Two: Function by manipulating strings

In this way, you can select a function from predefined functions by manipulation the string. Assign the null to remove it back.
	function AttachEventSampleTwo(sender){		
		
		if(sender.checked){
			var msg = sender.value + ' was selected.';
			var functionToCall =  'fire_' + sender.id + '("' + msg + '")';			
			document.getElementById('btnSampleTwo').onclick = new Function(functionToCall);
		}
		else
			document.getElementById('btnSampleTwo').onclick = null;
			
	}
		
	function fire_rdoSampleTwoEvent1(msg){
		alert('Sample Two Event 1 : ' + msg);
	}
	
	function fire_rdoSampleTwoEvent2(msg){
		alert('Sample Two Event 2 : ' + msg);
	}
		
	
	<input type="radio" id="rdoSampleTwoEvent1" name="SampleTwo" onclick="AttachEventSampleTwo(this)" value="Event One" />Event One
	<input type="radio" id="rdoSampleTwoEvent2" name="SampleTwo" onclick="AttachEventSampleTwo(this)" value="Event Two" />Event Two    
	<input type="button" id="btnSampleTwo" value="Fire" /><br/>
	

Event One Event Two


Sample Three: Multiple Events and Hardcoded Functions

In this way, you can add more than one event handlers for a certain event.
Please note: addEventListener and removeEventListener is for non-IE browsers and attachEvent and detachEvent is for IE.
	
	function AttachEventSampleThree(sender,functionToCall){
	
		var ctrl = document.getElementById('btnSampleThree');
		
		if(sender.checked){
			if(ctrl.addEventListener)
				ctrl.addEventListener('click',functionToCall,false);
			else if(ctrl.attachEvent)
				ctrl.attachEvent('onclick',functionToCall);
		}
		else{		
			if(ctrl.removeEventListener)
				ctrl.removeEventListener('click',functionToCall,false);
			else if(ctrl.detachEvent)
				ctrl.detachEvent('onclick',functionToCall);
		}
	}
	
	function SampleThreeEventOne(){
		alert('Sample Three: Event One');
	}
	 
	function SampleThreeEventTwo(){
		alert('Sample Three: Event Two');
	}
	
	
		<input type="checkbox" id="chkSample3Event1" onclick="AttachEventSampleThree(this,SampleThreeEventOne)"/>Event One        
		<input type="checkbox" id="chkSample3Event2" onclick="AttachEventSampleThree(this,SampleThreeEventTwo)"/>Event Two        
		<input type="button" id="btnSampleThree" value="Fire" /><br/>
	

Event One Event Two


Sample Four: Multiple Events and Variable Functions

This way is same as sample three except function name is builded by string manipulating
	
	var eventHandlers = new Array();
	
	function AttachEventSampleFour(sender){
	
		var ctrl = document.getElementById('btnSampleFour');
		var msg = sender.id + ' was checked.';
		var key = sender.id;
		var dynFunction =  sender.id + '("' + msg + '")';
		
		if(eventHandlers[key]==undefined || eventHandlers[key]==null)
			eventHandlers[key] = new Function(dynFunction);
				
		if(sender.checked){
			if(ctrl.addEventListener)
				ctrl.addEventListener('click',eventHandlers[key],false);
			else if(ctrl.attachEvent)
				ctrl.attachEvent('onclick',eventHandlers[key]);
		}
		else{		
			if(ctrl.removeEventListener)
				ctrl.removeEventListener('click',eventHandlers[key],false);
			else if(ctrl.detachEvent)
				ctrl.detachEvent('onclick',eventHandlers[key]);	
						
			eventHandlers[key] = null;
		}	
		
	}
	
	function chkSampleFourEventOne(msg){
		alert('Event One: ' + msg);
	}
	
	function chkSampleFourEventTwo(msg){
		alert('Event Two: ' + msg);
	}
	
	
	<input type="checkbox" id="SampleFourEventOne" onclick="AttachEventSampleFour(this)" />Event One        
	<input type="checkbox" id="SampleFourEventTwo" onclick="AttachEventSampleFour(this)"/>Event Two        
	<input type="button" id="btnSampleFour" value="Fire" /><br/>
	

Event One Event Two



author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

COMMENTS
blog comments powered by Disqus