Event "Target" Property in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Event_Target_Property.css">
<title>Event Target Property</title>
</head>
<body>
<h1>jQuery Event.target Property</h1>
<div id="box">
<h2>Test Box</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,
magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic
repudiandae nulla.</p>
<button>Test Button</button>
</div>
<br>
<h3></h3>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
//jQuery Event Object : Properties & Methods
// event.pageX,event.pageY,event.type,event.which,event.target,event.preventDefault(),event.isDefaultPrevented(),
// event.stopPropagation(),event.isPropagationStopped(),event.data()
//We use on() method to trigger multiple Events as shown below:
//Below "event" is an Object and "target" is Property in "event.target" as shown below:
//Below "event.target" is the Property of JavaScript (Not the Property of jQuery)
//Below "event.target" is Not the Property of jQuery
//Below "nodeName" is the Property of the JavaScript
$(document).ready(function () {
$("#box").on("click", function (event) {
// $("h3").html("Target Element: " + event.target);
// $("h3").html("Target Element: " + event.target.nodeName);
$("h3").html("Target Element: " + event.target.innerHTML);
});
});
</script>
</body>
</html>
Below File is css/Event_Target_Property.css File.
#box {
background: #d4d5f0;
width: 500px;
height: 200px;
border: 1px solid #0000ff;
margin-left: 20px;
padding: 10px;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment