Teach with us

What are event attributes in jQuery?

jQuery events have attributes such as for keyup and keydown events, if the Ctrl key was pressed, timestamp when the event created, etc.

The following are some of the event properties/attributes available:

S.No
Property & Description
1
altKey
Set to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.
2
ctrlKey
Set to true if the Ctrl key was pressed when the event was triggered, false if not.
3
data
The value, if any, passed as the second parameter to the bind() command when the handler was established.
4
pageX
For mouse events, specifies the horizontal coordinate of the event relative from the page origin.
5
pageY 
For mouse events, specifies the vertical coordinate of the event relative from the page origin.

Example

You can try to run the following code to learn how to work with jQuery event attributes:

Live Demo

<html>

   <head>
      <title>jQuery Attributes</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
       
      <style>
         .div {
            margin:10px;
            padding:12px;
            border:2px solid #666;
            width:60px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square below to see the result:</p>
       
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
       
   </body>
   
</html>
Updated on 11-Dec-2019 06:21:12

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements