The event handler equivalent of event listener

Question

I have the event listener like these:

document.getElementById("A").addEventListener("change", function (e) {
   // do something with e parameter when A change
}, false)

document.getElementById("B").addEventListener("click", function (e) {
  // do something with e parameter when B click
}, false)

I've 2 questions:

1. how should I write it in event handler version?
2. how should i call it?

It should be some kine like this:

<script type="text/javascript">
    function [this is question number 1]
    {
    // do something with e parameter when A change
    }
    function [this is question number 1]
    {
    // do something with e parameter when B click
    }
</script>

<div id="A" change="[this is question number 2]"></div>
<div id="B" click="[this isquestion number 2]"></div>

Regards,

Dav

Answer 1

You can do that :

<script type="text/javascript">
    function question1a(e)
    {
         // do something with e parameter when A change
    }
    function question1b(e)
    {
         // do something with e parameter when B click
    }
</script>

<div id="A" onChange="question1a(event)"></div>
<div id="B" onClick="question1b(event)"></div>

You have an example here: JSFiddle

Event handler is similar to event listener. This is just an inline version of your own version. Depending on your purpose, this is not recommended due to lack of performance and HTML maintainability.

You can read this article : http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Hope it helps !

Regards