Html Question posted in
Some basic documentation can be found here.

Html – Difference between onevent and addEventListener

I was learning about a few DOM events, and I tried to use the ‘blur’ event on the HTML body.

First with onblur

document.body.onblur = () => {
    dosomething();
}

and with AddEventListener

document.body.addEventListener("blur", ()=>{
    dosomething();
})

However, only using onblur works, so why didn’t it work with addEventListener("blur") in this case?
Is there any difference between them?

Tags:

2

Answers


  1. 0

    In the case you described, the reason why using onblur works while addEventListener("blur") doesn’t work is because the blur event doesn’t bubble up the DOM tree.

    When you use onblur directly on an element like document.body.onblur, you’re essentially setting a property directly on that element to listen for the blur event. This works because blur is a non-bubbling event, meaning it only applies to the element itself. So, when the blur event happens on the body, it triggers the event handler directly attached to it.

    However, when you use addEventListener("blur"), you’re setting up an event listener that listens for the blur event to bubble up the DOM tree. Since blur doesn’t bubble, attaching an event listener for it won’t work as expected on elements other than the one directly affected by the blur event.

    So, in summary:

    onblur works because it directly attaches an event handler to the element itself.
    addEventListener("blur") doesn’t work because blur doesn’t bubble up the DOM tree, and addEventListener listens for events that bubble.
    If you need to capture blur events on the body, using onblur directly on document.body is the appropriate approach.

    Login or Signup to reply.
  2. 0

    Interestingly it seems to have different behaviour depending on the type of element it is put on.

    I think the problem here is what is described in this answer:

    The issue is, the body doesn’t have the focus or blur events; the document does. Probably for compatibility with very old sites, however, the body element allows onfocus and onblur to be triggered when a focus / blur occurs on the document.

    Here’s an example of what happens on different elements:

    const body = document.body;
const div = document.getElementById("my-div");
const input = document.getElementById("my-input");

window.onblur = () => {console.log("onblur window");} // does not trigger
window.addEventListener("blur", () => {console.log("eventlistener window");}); // triggers

body.onblur = () => {console.log("onblur body");} // triggers
body.addEventListener("blur", () => {console.log("eventlistener body");}); // does not trigger

div.onblur = () => {console.log("onblur div");} // does not trigger
div.addEventListener("blur", () => {console.log("eventlistener div");}); // does not trigger

input.onblur = () => {console.log("onblur input");} // triggers
input.addEventListener("blur", () => {console.log("eventlistener input");}); // triggers
    #my-div {
  width: 100px;
  height: 20px;
  background: red;
  margin-bottom: 10px;
}
    <div id="my-div"></div>
<input type="text" id="my-input" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search