Event Handler Attachment - on (), off () and one () methods
- .on( events [, selector ] [, data ], handler ): Attach an event handler function for one or more events to the selected elements.
- .off( events [, selector ] [, handler ] ): Remove event handler
- .one( events [, selector ] [, data ], handler ); Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
- events: One or more space-separated event types( mouseenter, mouseleave, click etc.)
- selector: A selector string for filtering the descendants of the selected elements that trigger the event.
- data: Data to be passed to the handler in event.data when an event is triggered..
- handler: Function( Event eventObject [, Anything extraParameter ] [, ... ] ). A function to execute when the event is triggered.
# Example
Replace your html code with below code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
//case1
$("#button1").on("click", function () {
alert("single event and single handler");
})
//case2 : multiple event type and single handler function
$("#button2").on("click mouseleave mouseenter", function () {
$("span").text("multiple event type and single handler function").fadeIn("slow").fadeOut("slow");
})
//case3 : pass data to the handler function
$("#button3").on("click", { fname: "Ashish", lname: "Tiwary" }, function (event) {
$("span").text(event.data.fname + " " + event.data.lname).fadeIn("slow").fadeOut("slow");
})
//case4 : multiple event handler
$("#button4").on({
click: function () {
$("span").text("A click event");
},
mouseenter: function () {
$("span").text("Mouse Enter event was triggered");
}
})
//case5: passed all parameters
$("div").on("click", "span", { fname: "Ashish", lname: "Tiwary" }, function (event) {
$("#childSpan").text(" Child Span has recieved data = " + event.data.fname + " " + event.data.lname);
})
//case6: condition based handler
$("#button5").on("click mouseleave", function (event) {
if (event.type == "click") {
$("#childSpan").text("It was click event");
}
else {
$("#childSpan").text("It was a mouse Leave event");
}
})
// OFF method
$("#button6").on("click mouseleave", function (event) {
alert("button was clicked or was mouse entered")
})
$("#button6").off("click");
//one Method
$("#button7").one("click dblclick", function (event) {
alert("click or dbl click")
})
})
</script>
<style>
.btnclass {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="border:2px solid blue;color:green">
<p>
<button id="button1" class="btnclass">simple handler </button>
<button id="button2" class="btnclass">multiple event type</button>
<button id="button3" class="btnclass">Passing data to handler</button>
<button id="button4" class="btnclass">Multiple event handler</button>
<button id="button5" class="btnclass">handler based on condition</button>
<button id="button6" class="btnclass">OFF method</button>
<button id="button7" class="btnclass">One method</button>
<span class="btnclass" style="border:2px solid blue;color:red" id="childSpan">child span click </span>
</p>
</div>
<span style="color:red;"></span>
</body>
</html>
No comments:
Post a Comment