Handling Events in jQuery

Blog Author

Tekslate

Published Date

6th October, 2020

Ratings

Views

358

Share this blog :

Handling Events using JavaScript

Question: What type of JavaScript code do you write to handle a button click event?

Answer It depends on the browser!

Event Attachment Techniques Most Browsers

mybutton.addEventListerer(‘click’,function() {}, false);

Internet Explorer

mybutton.attachment(‘onclick’,function() { });

If you want to enrich your career and become a professional in JavaScript, then visit Tekslate - a global online training platform: "JavaScript Training" This course will help you to achieve excellence in this domain.

jQuery Event Model Benefits

Events notify a program that a user performed some type of action jQuery provides a cross-browser event model that works in IE, Chrome, Opera, Firefox, Safari and more jQuery event model is simple to use and provides a compact syntax

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”>

</script>

</head>

<body>

<button id=”buttonId”>

click</button>

<script type=”text/javascript”>

var myButton=document.getElementById(“buttonId”);

if(document.addEventListener)

{

myButton.addEventListener(“click”,function())

{

alert(“click Button”);

},

false);

}

else{

mybutton.attachEvent(“onclick”,function(){alert(“click IE Button”);

}); }

</script>

</body>

</html>

Handling Click Events

Raising a click event from within another function:

$(‘#otherID’).click(function()

{ $(‘#myID’).click(); });

This would fire when the element otherID was clicked and raise the click event for myID

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”>

</script>

$(document).ready(function()

{ $(‘#buttonid1’).click(function()

{ // raising the event using jQuery function

alert(“button1 is clicked”); $(“#buttonld2”).click(); });

$(“#buttonid2”).click(function()

{

alert(“button2 is clicked”);

});

});

</script>

</head>

<body>

<button id=”buttonid1”> click</button>

<button id=”buttonid2”> click2</button>

</body>

</html>

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”>

$(document).ready(function()

{

alert(“City Dropdown changed to :” + $(this).val());

});

});

</script>

</head>

<body>

<select id=”cityId”>

<option value=”hyd”>Hyderabad</option>

<option value=”hyd”>Hyderabad</option>

<option value=”bang”>Banglore</option>

<option value=”mumbai”>Mumbai</option>

<option value=”hyd”>Hyderabad</option>

</select>

</body>

</html>

Handling Click Events

click(handler(eventObject)) is used to listen for a click event or trigger a click event on an element

$(‘#myID’).click(function()

{ alert(‘The element myID was clicked’); });

<html>

<head>

<script type=”text/css”>

.Hilight:

bigground-color:pink;

}

</style>

<script type=”text/javascript” src=”jQuery.js”>

</script>

<script type=”text/javacript”>

$(document).ready(function()

{

$(“div#myDiv”).click(function(event)

{ $(this).addClass(“Hilight”); var result=””;

result=result+”x:”+event.pageX+”<br/>”;

result=result+”Y:”+event.pageY+”<br/>”;

result=result+”keycode:”+event.keycode+”<br/>”;

result=result+”TimeStamp:” + event.timeStamp+”<br/>”;

result=result+”Target element ID:”+$(event.target).attr(“id”)+”<br/>”;

result=result+”Event type:” + event.type+”<br/>”; $(this).html(result); });

});

</sript>

</head>

<body>

<div id=”myDiv” style=”width:400px;height:200px;border:2px solid black;”>

This is my div This is my div This is my div This is my div

</div>

</body>

</html>

<html>

<head>

<script type=”text/css”>

.Hilight: bigground-color:pink;

}

</style>

<script type=”text/javascript” src=”jQuery.js”>

</script>

<script type=”text/javacript”>

$(document).ready(function()

{

$(“div#myDiv”).mouseenter(function()

{

$(this).toggleclass(“Hilight”); }).mouseleave(function()

{ $(this).toggleclass(“Hilight”); }

}

.click(function(event){ $(this).text(“X: “+event.pageX+”Y:”+event.pageY);

}};

}};

</sript>

</head>

<body>

<div id=”myDiv” style=”width:400px;height:200px;border:2px solid black;”>

This is my div This is my div This is my div This is my div This is my div

</div>

</body>

</html>

Using bind()

.bind(eventType,handler(eventObject))

attaches a handler to an event for the selected element(s)

$(‘#MyDiv’).bind(‘click’,function())

{

//Handle click event });

.click() is the same as .bind(‘click’)

Using unbind()

unbind(event) is used to remove a handler previously bound to an element:

$(‘#test’).click(handler); can be unbound using

$(‘#text’).unbind(); Specific events can also be targeted using unbind():

$(‘#test’).unbind(‘click’);

Binding Multiple Events using jQuery

bind() allows multiple events to be bound to one or more elements Event names to bind are separated with a space:

$(‘#MyDiv’).bind(‘mouseenter mouseleave’, function()

{ $(this).toggleclass(‘entered’); } );  

<html>

<head>

<script type=”text/css”>

.Hilight: bigground-color:pink;

}

</style>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javacript”>

$(document).ready(function()

{

$(“div#myDiv”).bind(“mouseenter mouseleave click”,function(event)

{ $(this).toggleClass(“Hilight”); if(envetscope==’click’)

{ $(this).add(“X:” + even.pageX+”Y:”+event.pageY); } });

$(“button”).click function(){ //$(“divmyDiv”).unbind();

$(“div#.Div”).unbind(“click”); }}; });

</sript>

</head>

<body>

<div id=”myDiv” style=”width:400px;height:200px;border:2px solid black;”>

This is my div This is my div This is my div This is my div This is my div

</div>

<button>Unbind even button</button>

</body>

</html>

live() and delegate() Functions

live() and delegate() allow new elements added into the DOM automatically be “attached” to an event handler

live() – Allow binding of event handlers to elements that match selector, including future elements. Events bubble upto the document object.

delegate() – Replacement for live() in jQuery 1.4 Attaches an event handler directly to the selector context.

Using live()

Event handlers can be set using live()
The document object handles events by default
Works even when new objects are added into the DOM:

$(‘.someclass’).live(‘click’,someFunction); Stop live event handling using die(); $(‘.someClass’).die(‘click’,someFunction); Screenshot_10

Click Event

<spanclass=”someclass”/>

Using delegate()

Newer version of live() added in jQuery 1.4 A context object (#Divs in the sample belpw) handles events by default rather than the document object Works even when new objects are added into the DOM: $(‘#Divs’).delegate(‘div’,’click’,someFunction); Stop delegate event handling using undelegate()

How delegate() works Screenshot_11

Click Event

<span class=”someclass”/>

<p class=”someClass”/>

<div class=”someclass”/>

<html>

<head>

<script type=”text/javascript”src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function()

{ var PhoneDiv=$(“div#newDiv”);

$(“#AddPhoneButton”,click(function(){ var phoneType.Clone=$(“div:eq(0)”.PhoneDiv).clone();

var PhoneNumber.Divclone=$(“div:eq(1)”,PhoneDiv).clone();

$(“select”,phone.typeDivclone).val(“);

$(“input”,phone.NumberDivclone).val(‘’)l PhoneDiv.apper(“<div style=’clear:both’/>”

.append(PhoneTypeDivcloappend(PhoneNumberDivclone)));

$(“input”,PhoneDiv).keypress”,function(event){

if(event.keycode(48) || event.keycode>57)

{

//even propagation();

return;

} }};

$(“button”).click(function)

{

// $(“input”,phoneDiv).die(); $(“input”,Phonediv).die(“keypress”);

});

PhoneDiv.delegate(“im”,”keypress”,function(event){ if(event.keycode 48 || event.keycode>57)

{

//even popPropagatation();

return;

} }

0;

$(“button”).click(function)

{ PhoneDiv.undelegate(“input”,”keypress”);

}}; }};

</script>

</head>

<body>

<table boarder=”1”>

<tr>

<td>Name</td>

<td> <input type=”text”,name=”name”/> </td>

</tr>

<tr>

<td> Password </td>

<td> <input type=”password” name=”password” /> </td>

</tr>

<tr>

<td> Address</td>

<td> <textarea cols=”50” rows=”4”></textarea> </td>

</tr>

<tr>

<td>Phone</td>

<td> <input type=”submit” id=”AddPhoneButton” value=”AddPhone”/>

<div id=”PhoneDiv”> <div id=”PhoneTypeDiv” style=”float:left”>

<select name=”PhoneType”>

<option value=””>Select One</option>

<option value=”Mobile”>Mobile</option>

<option value=”Office”>Office</option>

<option value=”Home”>Home</option>

</select>

</div>

<div id=”PhoneNumberDiv” style=”float:left”>

<input type=”text” name=”PhoneNumber”/>

</div>

</div>

</td>

</tr>

<tr>

<td>City</td>

<td> <select id=”cityID”>

<option value=”hyd”>Hyderabad</option>

<option value=”bang”>Banglore</option>

<option value=”chennai”>chennai</option>

<option value=”mumbai”>Mumbai</option>

</select>

</td>

</tr>

<tr>

<td colspan=”2” align=”center”> <input type=”submit” value=”submit”/> </td>

</tr>

</table>

<button>Release Event Handlers</button>

</body>

</html>

About Author

Name

TekSlate

Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .

Related Blogs

Write For Us