Difference between HTML event and JavaScript events

Question

There are many ways by which we can attach an event on an HTML element. The first way is: HTML attribute

<div id="foo" onclick="print2()> My event is attached as HTML attribute</div>

The second way is using some library (say jQuery)

<div id="bar"> My event is attached using jQuery </div>
<script>
    $("#bar").click(function() {
        alert("Hi this is Bar");
    }
</script>

I earlier thought that jQuery might be internally converting the event to corresponding HTML attribute but this does not happen. Check this http://jsfiddle.net/blunderboy/wp4RU/3/

I am logging all the attributes of foo and bar and see bar does not have onclick attribute. Please explain.

I hope you learnt Javascript with DOM before jumping to jQuery. — syockit
– syockit, Commented Sep 6, 2012 at 5:06

Praveen Kumar Purushothaman · Accepted Answer · 2012-09-06 05:11:56Z

4

There is nothing called HTML Event! The two types of events you have described are, inline events and unobtrusive events, and both are javascript events.

Inline Events

When you declare javascript code on the elements itself, then it becomes an inline event. You have a few common events (as attributes to HTML Elements) like onclick, onkeydown, onkeypress, onkeyup, and all of them start with on. One such example is:

<a href="#" onclick="alert('You clicked me!')">Click Me!</a>

Unobtrusive Events

We need to assign something to be performed when the event is triggered. The = symbol is always used in JavaScript to assign the value on the right to the method or property on the left.

The window is not the only object we can attach events to. We can attach events to any object within the web page provided that we have a way of uniquely identifying that object. One way of identifying an object is by giving it an ID and referencing it by document.getElementById("id_of_the_element").

Lets take the same example.

<a href="#" id="clickme">Click Me!</a>

Instead of the onclick attribute, I have an ID in the same place, which uniquely identifies the HTML element <a>. Now I can get the ID inside javascript this way:

document.getElementById('clickme');

For this, I can attach an event handler, which doesn't differ much from the way we use the attributes. It just doesn't have the on in the front. In our previous example, we used onclick, but now we are just going to use click.

document.getElementById('clickme').click = functionName;

Here, the functionName refers to any javascript's function name, or an anonymous function. So, for the alert, if we create a function named alertme(), we can define this way:

function alertme()
{
    alert('You clicked me!');
}

Now to attach the function to the element can be done this way:

document.getElementById('clickme').click = alertme;

Still feeling lazy, you can do it using the anonymous function way, which takes no name:

document.getElementById('clickme').click = function () {
    alert('You clicked me!');
}

Hope you understood. :) Let me know for further clarification.

edited Sep 6, 2012 at 5:11

answered Sep 6, 2012 at 5:06

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

XTard Over a year ago

Hey, it's been 5-7 years since then, but the question I was looking to answer still remains - what's the real difference - memory, junk, management? How does it all affect the memory, how would it be easier to manage? For example if I had 30 similar elements (look-alike options, with a matching class), but each of them had an element that serves purpose as an end point for an event would it be better to just listen to them all via eventListener, or having inline event attached to them?

Praveen Kumar Purushothaman Over a year ago

@XTard Something like delegating the event handler and checking for e.target will be better in this case. Here there's only one single event listener / handler. 😊 Let me know if you need an example.

Collectives™ on Stack Overflow

Difference between HTML event and JavaScript events

1 Answer 1

Inline Events

Unobtrusive Events

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Inline Events

Unobtrusive Events

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related