jQWidgets jqxDraw on() Method

Last Updated : 29 Jan, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG and HTML5

The on() method is used for adding an event handler to an element of the specified jqxDraw widget.

Syntax:

Instance.on(Element, 'click', function () {

  // Getting the Y coordinate of the circle's center
  var Y_Coordinate = parseInt(Instance.getAttr(Element, 'cy'));

  // Moving the circle down with 15 pixels
  Instance.attr(Element, {
        cy: Y_Coordinate + 15
     });
});

Parameters: This method accepts three parameters that are illustrated below:

Element: This is the specified element.
click: This is the specified event.
function: This is the specified function to add the event handler.

Return values: This method does not return any values.

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxDraw on() Method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" src= 
"scripts/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
"jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" src= 
"jqwidgets/jqxdraw.js"> 
    </script> 
    <script type="text/javascript" src= 
"jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3>jQWidgets jqxDraw on() Method</h3> 
        <div id="jqx_Draw" style="height:200px; width:700px;"> 
        </div> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Draw').jqxDraw(); 
                var Instance = $('#jqx_Draw').jqxDraw('getInstance'); 
  
                // Creating a circle with cx of 130, cy of 50, 
                // radius of 25 and parameters for filling the 
                // circle with green color 
                var Element = Instance.circle(130, 50, 25, { 
                    fill: 'green' 
                }); 
                Instance.on(Element, 'click', function () { 
  
                    // Getting the Y coordinate of the circle's center 
                    var Y_Coordinate = parseInt( 
                        Instance.getAttr(Element, 'cy')); 
  
                    // Moving the circle down with 15 pixels 
                    Instance.attr(Element, { 
                        cy: Y_Coordinate + 15 
                    }); 
                }); 
                Instance.refresh(); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>