What are event attributes in jQuery?

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 19-Dec-2017 13:46:01
Advertisements