3.5 How to capture an event?

How to capture events (load, click, mouseover, mousemove, resize, ...)?
- Here is the concept of events and event listeners. ,
- Do you remember , i.e., how to register event listeners?
  - The inline model. Here is an example.
```

<button onclick="this.innerHTML='Amazing!'">Click me! I'll rock you.</button>
```
  - Read "Assign Events Using the HTML DOM" in JavaScript HTML DOM Events for the traditional model. Here is an example.
```
// target_object.oneventname = function() {...};
document.getElementById("rock-button").onclick = function(eobj) {
    this.innerHTML = "Amazing!";
};
```
  - W3C event-registration model. Here is an example.
```
// target_object.addEventListener('eventname', dosomething);  // dosomething() is an event listener.
window.???('load', function(eobj) {  // What is the name of this type of function?
    document.getElementById('menu-signin').???('click', menu_signin_selected);
});
function menu_signin_selected(eobj) {  // eobj is an Event object.
    ...
}    
```
  - Can you register multiple listeners for the same event over the same target element?
  - How to remove a registered event listener?
    removeEventListener() with the same event listener
  - How to register the same event listener over multiple objects of the same HTML element type?
  - Do you remember how to change the content of an element?
  - What is the this object?
  - Trial 4: Let's try the above button example of "Click me! I'll rock you.," using W3C event-registration model.
    <button ???='tr4-button'>Click me! I'll rock you.</button> <script> document.????(???, ???); ??? tr4_eh(eobj) { eobj.target.??? = "If it isn't broke, don't fix it."; // target is the object on which the event was triggered. } </script>
- Can we say a JavaScript program is like a collection of event listeners?
- Read 'Common HTML Events' in JavaScript Events.
- Read HTML DOM Events for more events.
- Read more information in HTML DOM Events to see what properties and methods are included in Event objects.
  - How to obtain the event object?
  - How to obtain the target element on which the event is triggered?
  - How to obtain the key value when a key is pressed?
  - How to obtain the mouse position? Check MouseEvent in the above link.
  - Can you write the code tracing mouse position? E.g., xeys -
- Trial 5: Let's try to capture the mouse move over the window and show its position.
  <p ???='tr5-msg'>Position: </p> <script> document.???(???, ???(eobj) { // A MouseEvent object is passed to this event listener. document.????.??? = 'Position: x = ' + eobj.clientX + ', y = ' + ???.???; }); </script>

Learning outcomes
- How to use associative arrays.
- List some common events.
- List the three models of event handling with examples.
- How to capture events on an element using JavaScript.
- How to obtain the target element on which the event is triggered.