Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery event.pageY Property
jQuery | event.pageY Property: Learn about the jQuery event.pageY Property with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 28, 2022
event.pageY Property
An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.pageY Property.
The event.pageY is a built-in property in jQuery. This property helps to get the current position of the mouse pointer relative to the top edge of the document. It can be the web page (document) or some selected area within the document also. We can use any of the needed mouse pointer methods in jQuery and further find out its position in the document using event.pageY property. Since, this clearly states 'pageY', hence, it will return the pointer value along the Y-axis of the document.
event.pageY Property Syntax
event.pageY
Since this is a property, it does not accept any parameters. Generally, event.pageY is used with event.pageX to get an appropriate result. The below example helps us to know the position of the mouse pointer inside the div box specifically.
jQuery event.pageY Property Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
#box{
height:150px;
width: 300px;
border:solid 2px olive;
text-align: center;
}
</style>
</head>
<body>
<h2>jQuery Event - Page Y Property</h2>
<p>Move the mouse pointer inside the box and get its position relative to Top edge of the box.</p>
<hr>
<div id="box">
<p>Welcome to Include Help</p>
<p>This is jQuery tutorial for events.</p>
<p>Thanks for visiting</p>
</div>
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('div#box').mousemove(function(event){
$('h3').html('Mouse Pointer: ' + event.pageY);
})
$('div#box').mouseleave(function(){
$('h3').html('Mouse Pointer: 0');
})
});
</script>
</html>
Output:
