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 two questions:

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

It should be some kind 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 is question number 2]"></div>

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