The composed of Event for JS returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target; otherwise false.
<!doctype html>
<html>
<body>
<output></output>
<script>
const type = "mytype";
const eventInitDict =
{
composed: true
};
const event = new Event(type, eventInitDict);
document.querySelector("output").innerHTML = event.composed;
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<output></output>
<script>
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composed;
}
const type = "mytype";
const event = new Event(type);
const target = new EventTarget();
target.addEventListener(type, callback);
target.dispatchEvent(event);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<output></output>
<script>
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composed;
}
const type = "mytype";
const eventInitDict =
{
composed: true
};
const event = new Event(type, eventInitDict);
const target = new EventTarget();
target.addEventListener(type, callback);
target.dispatchEvent(event);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composed;
}
const type = "mouseover";
const event = new Event(type);
const target = document.querySelector("button");
target.addEventListener(type, function(){callback(event)});
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composed;
}
const type = "mouseover";
const target = document.querySelector("button");
target.addEventListener(type, callback);
</script>
</body>
</html>