jQuery Events Handling
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.
jQuery event methods
jQuery provides a number of shorthand methods, each of which corresponds to a native DOM event. In the following Table are listed the most useful jQuery events:
| Event methods | Description |
| click() | Binds or Triggers the "click" event on an element |
| blur() | Binds or Triggers the "blur" event on an element |
| focus() | Binds or Triggers the "focus" event on an element |
| dblclick() | Binds or Triggers the "dbclick" event on an element |
| mousedown() | Binds or Triggers the "mousedown" event on an element |
| mouseup() | Binds or Triggers the "mouseup" event on an element |
| mouseover() | Binds or Triggers the "mouseover" event on an element |
| keydown() | Binds or Triggers the "keydown" event on an element |
| keypress() | Binds or Triggers the "keypress" event on an element |
Handling jQuery click event
.click( handler(eventObject)) is used to listen for a click event or trigger a click event on an element.
The following code demonstrates the click event:
<body>
<form>
<label for="FirstNameTextBox">First Name: </label>
<input id="FirstNameTextBox" type="text" /><br />
<label for="LastNametextBox">Last Name: </label>
<input class="MyInput" id="LastNameTextBox" type="text" /><br />
<td><input id="SubmitButton" type="button" value="Submit" />
<span id="DivOutput"></span>
</form>
//USING CDN
<script src="https://code.jquery.com/jquery-3.4.1.min.js" </script>
<script type="text/javascript">
$(document).ready(function () {
$('#SubmitButton').click(function () {
var firstNameVal = $('#FirstNameTextBox').val();
var lastNameVal = $('#LastNameTextBox').val();
$('#DivOutput').text(firstNameVal + ' ' + lastNameVal);
});
</script>
</body>
Using on()
.on(eventType, handler(eventObject)) attaches a handler to an event for the selected element.
The code below demonstrates the how to binding click event with on():
<script type="text/javascript">
$(document).ready(function () {
$('#MyDiv').on('click', function() {
//Handle click event
});
});
</script>
Using off()
.off(event) is used to remove a handler previously bound to an element.
The code below demonstrates this:
<script type="text/javascript">
$(document).ready(function () {
$('#test').click(handler); //can be unbound using
$("#test").off();
});
</script>
Specific events can also be targeted using off():
<script type="text/javascript">
$(document).ready(function () {
$('#test').off('click');
});
</script>
Binding Multiple Events with on()
on() allows multiple events to be bound to one or more elements Event names to bind are separated with a space:
<head>
<style type="text/css">
.Highlight { background-color:Yellow;}
</style>
</head>
<body>
<div id="MyDiv">This is some text</div>
//USING CDN
<script src="https://code.jquery.com/jquery-3.4.1.min.js" </script>
<script type="text/javascript">
$(document).ready(function () {
$('#MyDiv').on('mouseenter mouseleave mouseup', function (e) {
$(this).toggleClass('Highlight');
$(this).css('cursor', 'pointer');
if (e.type == 'mouseup') {
$(this).text('X: ' + e.pageX + ' Y: ' + e.pageY);
}
});
</script>
</body>
Handling hover events
Hover events can be handled using hover():
<script type="text/javascript">
$(document).ready(function () {
$(selector).hover(handlerIn, handlerOut)
//handlerIn is equivalent to mouseenter
//handlerOut is equivalent to mouseleave
});
</script>
Using hover()
The following code example highlights the element on mouseenter and sets it back to white on mouseleave.
<body>
<div id="target">This is some text</div>
<script type="text/javascript">
$(document).ready(function () {
$('#target').hover( function(){
$(this).css('background-color', '#00FF99');
},
function(){
$(this).css('background-color', '#FFFFFF');
});
});
</script>
</body>
Ads Right
