# Event DOM and delegation

## 3 type of event model: 

dom0 model, dom2 model, IE event model

## addEventListener

```
target.addEventListener(type, listener, options);
```

**type:  error, click, focus, blur, open, cloase, load**

**listener: ()=>{}**

**option: default false,  false: run on bubble, true: run on capture.**

## dom 0 event model:

 1\. bind use element property:

```
<button onclick="click()">click</button>
```

2\. get the element, then bind it using adding values.

```
const btn = document.getElementById('btn')
btn.onclick = function(){// do }
btn.onclick = null 
```

this will not spread, only bind 1 event

## Dom2 event model:

### 3 process in each event: capture, process, bubbling

use addEventListener() to add event listener

![](/files/-MK-i4yWdteDj_lkBo-N)

## IE event model

### 2 process, no capture, process and bubbling

use attachEvent() to add event listener

## capturing

[Here’s an example.](https://codepen.io/cferdinandi/pen/pqJZdK)

```
document.addEventListener('focus', function (event) {
	console.log(event.target);
}, false);
```

You can focus on things over and over again, but the event callback will never run.

There’s a trick you can use to *capture* the event, though. The last argument in `addEventListener()` is called `useCapture`. We almost always set it to false.

For events that don’t bubble, set it to `true` to capture the event anyways.

## Bubbling

When an event triggers on a DOM element, it will attempt to handle the vent if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. The bubbling occurs up the element's ancestors all the way to the document. Event bubbling is the mechanism behind event delegation.&#x20;

```
var logEvent = function(event) {
    console.log(event.target);
};
document.querySelector('main').addEventListener('input', logEvent, false);
document.querySelector('div').addEventListener('input', logEvent, false);
document.querySelector('input').addEventListener('input', logEvent, false);
```

## How to stop Event bubbling and capturing during Event delegation

e.stopPropagation()

## Event Delegation vs Event Bubbling

Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it.

Event bubbling is what the event itself does.

## delegation 委托

delegation element events to other elements using bubbling.&#x20;

you select any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.

Remember, bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.

　　***addEventListener(event, listener, useCapture)***　　

useCapture : true: capturing,      useCapture = false : bubbling

Event delegation is a technique for listening to events where you *delegate* a parent element as the listener for all of the events that happen inside it.

Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM.&#x20;

The benefits of this technique are:

* **Memory** footprint goes down (because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant)
* **dynamics binding** There is no need to unbind the handler from elements that are removed and to bind the event for new elements.&#x20;

For example, if you wanted to detect any time any field changed in value inside a specific form, you could do this:

```
var form = document.querySelector('#hogwarts-application');

// Listen for changes to fields inside the form
form.addEventListener('input', function (event) {

	// Log the field that was changed
	console.log(event.target);

}, false);
```

<https://learn.jquery.com/events/event-delegation/>

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gzqsjtu.gitbook.io/workspace/javascript/event-delegation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.