Open In App

SVG Event.composed Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The SVG Event.composed property indicates whether the event will propagate across the shadow DOM boundary into the standard DOM.

Syntax:

const isComposed = Event.composed

Return value: This property returns the boolean value of the event element.

Example 1: In this example, we will use onclick event.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <circle cx="50" cy="50" r="50" 
            onclick="check(event)" />
  
        <script type="text/javascript">
            function check(event) {
                document.write(
                    "This Event is composed : ",
                    event.composed);
            }
        </script>
    </svg>
</body>
  
</html>


Output:

Example 2: In this example, we will use onclick event.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text x="50" y="20" font-size="20px" 
            onclick="check(event)">
            GeeksForGeeks
        </text>
          
        <script type="text/javascript">
            function check(event) {
                document.write(
                    "This Event is composed : ",
                    event.composed);
            }
        </script>
    </svg>
</body>
  
</html>


Output:

Example 3: In this example, we will use onmouseover event.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <circle cx="50" cy="50" r="50" 
            onmouseover="check(event)" />
  
        <script type="text/javascript">
            function check(event) {
                document.write(
                    "This Event is composed : ",
                    event.composed);
            }
        </script>
    </svg>
</body>
  
</html>


Output:

Example 4: In this example, we will use onmouseover event.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text x="50" y="20" font-size="20px" 
            onmouseover="check(event)">
            GeeksForGeeks
        </text>
          
        <script type="text/javascript">
            function check(event) {
                document.write(
                    "This Event is composed : ",
                    event.composed);
            }
        </script>
    </svg>
</body>
  
</html>


Output:



Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads