Javascript Click Events

The previous lesson of javascript lessons series was about dynamically creating an html element in javascript and in this lesson we will learn about javascript click events.

Javscript OnClick Event:

Javascript onclick event is triggered when an html element is clicked. An example code of onclick event attached to a button is given below:



Html Code:

<input type="button" value="Click Event!" id="btn1" />

Javascript Code:

<script type="text/javascript">
var btn1 = document.getElementById('btn1');
btn1.onclick = btn1Alert;

function btn1Alert(){
 alert('Click Event!');
}
</script>

The above code will show an alert box on button click.

Javascript OnMouseDown Event:

Javascript onmousedown event is triggered when a mouse button is pressed on an html element. OnMouseDown event is triggered before the complete click as soon as the mouse button is pressed. An example code of onmousedown event attached to a button is given below:



Html Code:

<input type="button" value="Mouse Down Event!" id="btn2" />

Javascript Code:

<script type="text/javascript">
var btn2 = document.getElementById('btn2');
btn2.onmousedown = btn2Alert;

function btn2Alert(){
 alert('Mouse Down Event!');
}
</script>

The above code will show an alert box onmousedown on a button.

Javascript OnMouseUp Event:

Javascript onmouseup event is triggered when a mouse button is released on an html element. OnMouseUp Event will still be triggered if the mouse button is pressed on some other html element but released on the element to which onmouseup event is attached. An example code of onmouseup event attached to a button is given below:



Html Code:

<input type="button" value="Mouse Up Event!" id="btn3" />

Javascript Code:

<script type="text/javascript">
var btn3 = document.getElementById('btn3');
btn3.onmouseup = btn3Alert;

function btn3Alert(){
 alert('Mouse Up Event!');
}
</script>

The above code will show an alert box when mouse button is released on an html button.

Javascript OnDoubleClick Event:

Javascript ondblclick event is triggered when an html element is double clicked. An example code of ondblclick event attached to a button is given below:



Html Code:

<input type="button" value="Double Click Event!" id="btn4" />

Javascript Code:

<script type="text/javascript">
var btn4 = document.getElementById('btn4');
btn4.ondblclick = btn4Alert;

function btn4Alert(){
 alert('Double Click Event!');
}
</script>

The above code will show an alert box when a button is double clicked.

Javascript OnContextMenu Event:

OnContextMenu Event is triggered when the right button of the mouse is clicked on an html element. An example code of oncontextmenu event attached to a button is given below:



Html Code:

<input type="button" value="Context Menu Event!" id="btn5" />

Javascript Code:

<script type="text/javascript">
var btn5 = document.getElementById('btn5');
btn5.oncontextmenu = btn4Alert;

function btn5Alert(){
 alert('Context Menu Event!');
}
</script>

The above code will show an alert box when the right button of a mouse is clicked on an html button.

Javascript OnFocus Event:

Javascript onfocus event is triggered when some one clicks in an input field like a text field and it gets in focus. An example code of onfocus event attached to an input field is given below:

Html Code:

<input type="text" value="On Focus..." id="txt1" />

Javascript Code:

<script type="text/javascript">
var txt1 = document.getElementById('txt1');
txt1.onfocus = txt1Focus;

function txt1Focus(){
 alert('Focus');
}
</script>

Javascript OnBlur Event:

Javascript onblur event is triggered when a user clicks out of an input element and focus is shifted from the element. An example code of onblur event attached to an input field is given below:

Html Code:

<input type="text" value="On Blur..." id="txt1" />

Javascript Code:

<script type="text/javascript">
var txt1 = document.getElementById('txt1');
txt1.onblur = txt1Blur;

function txt1Blur(){
 alert('Blur');
}
</script>

Javascript OnInput Event:

Javascript oninput event is triggered when the value of an input element changes i.e the event will be triggered on each key press if a user is writing something in the input element. An example code of oninput event attached to an input field is given below:



Html Code:

<input type="text" value="" id="txt2" />

Javascript Code:

<script type="text/javascript">
var txt2 = document.getElementById('txt2');
txt2.oninput = txtinput;

function txtinput(){
 alert(this.value);
}
</script>

Javascript OnChange Event:

Javascript onchange event is triggered when the value of an input element changes. The difference between oninput and onchange is that oninput event is triggered immediately after the change in value while onchange event is triggred when the input element loses focus. OnChange event will be triggered if we change the option of a select box. An example code of onchange event attached to a select field is given below:

Option 1 Option 2 Option 3

Html Code:

<select id="selectBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

Javascript Code:

<script type="text/javascript">
var selectBox = document.getElementById('selectBox');
selectBox.onchange = selectChange;

function selectChange(){
 alert('Option Change');
}
</script>

For more lessons on Javascript subscribe on InformationBitz.com