custom event
I am trying to customize the default javascript event, namely click, code is in below :
<!DOCTYPE html>
<html>
<body style="background-color: white;">
<div id="container">
<div id="parent">
<div id="child"></div>
</div>
</div>
</body>
<style>
#container{
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
margin: auto;
width: 850px;
height: 500px;
}
#parent{
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
margin: auto;
width: 450px;
height: 300px;
}
#child{
border: 5px solid black;
width: 300px;
height: 150px;
}
</style>
<script>
const container = document.getElementById("container");
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const customClick = new Event("click",{
bubbles : true,
cancleable: false,
compose: false
});
container.addEventListener("click",function change(){
container.style.backgroundColor = "red";
});
container.removeEventListener("click",function change(){
container.style.backgroundColor = "red";
});
parent.addEventListener("click",function change(){
parent.style.backgroundColor = "yellow";
});
parent.removeEventListener("click",function change(){
parent.style.backgroundColor = "yellow";
});
child.addEventListener("click",function change(){
child.style.backgroundColor = "green";
});
child.removeEventListener("click",function change(){
child.style.backgroundColor = "green";
});
container.dispatchEvent(customClick);
parent.dispatchEvent(customClick);
child.dispatchEvent(customClick);
</script>
</html>
What I'm confused about this is how the callback function can be called before the event is being triggered
What I'm confused about this is how the callback function can be called before the event is being triggered
8 Replies
I don't really understand your question.
You are dispatching the customClick-event on the 3 elements in the last 3 lines.
ah, i see what you mean. you removed the eventlisteners directly after creating them
but sir can we customize the default event in javascript like click event because my goals is i want to make the click event doesn't bubble by using custom event and not used the stopPropagation( ) because if i can controll the bubble event with custom event i can make none bubble event be a bubble event.
why not just use stopPropagation though?
i want to controll the bubble event sir because i want to make none bubble event like animationend being bubble event
These don't work because the function isn't the same.
For this specific issue you want
good catch!
why though? It's best to be explicit when you're writing code, and if you overwrite the default handler and anyone else reads your code, they'll be confused no end. It can take hours just to figure out what the last guy was doing in your code base if you have stuff like that in there.
Not that I think you can replace the click handler btw. You just definitely shouldn't.
okay sir thanks for the explanation
you can add
e.stopPropagation() to a click handler snippet if you want, but 99% of the time you don't need to worry about propagation anyway