A click event

code

<div class = grandpa>
    <div class = dad>
        <div class = son>The text</div>
    </div>
</div>
Copy the code

Grandpa >. Dad >. Son add event listener fnYe/fnBa/fnEr to each of the three divs

Question 1: Who was clicked

Click on the text, calculate not click son?

Click on the text, does that count as clicking dad?

Click text, does it count as click grandpa?

Answer: Both

Problem 2: Call order

Click on the text and which of the fnYe/fnBa/fnEr functions is called first?

Answer: Either

origin

Explorer and netscape

IE5 thinks fnEr first, netscape thinks fnYe first.

In 2002, the W3C published a standard called DOM Level 2 Events Specification stating that browsers should support both call orders.

First, see if there is function listening in the order of grandpa => dad => son

Then see if there is function listening in the order of son => father => grandfather

If there is a function listening to call, and provide time information, not skip

The term

Looking for a listener from the outside in is called event capture

Looking for a listening function from the inside out is called time bubbling

Instead of calling fnYe/fnBa/fnEr twice, the developers chose to put fnYe/fnBa/fnEr in the capture or bubble phase

Schematic diagram

addEventListener

Bind event API

IE5*: baba. AttachEvent ('onclick',fn) // BubblingNetvista: baba. AddEventListener ('click',fn) // Capture W3C: baba.addEventListener('click',fn,bool)Copy the code

If bool is not passed or falsy

Let fn bubble, that is, when the browser finds that BABA has fn listeners during the bubble phase, it calls FN and provides event information

If bool is true

Let FN go capture, that is, when the browser discovers that BABA has fn listeners during the capture phase, it calls FN and provides the time information

Code demo

Code sample

The bubbling demo

Capture the demonstration

Note that the e object is passed to all listener functions. After the event ends, the e object does not exist.

target V.S. currentTarget

The difference between

E. target Elements that the user operates on

E.currenttarget The element that the programmer listens for

This is the e.c. with our fabrication: urrentTarget

For example,

Div >span{text}, the user clicks text

E. arget is a span

E.c. with our fabrication: urrentTarget is div

A special case

background

Only one div is being listened on (not considering both parent and child are being listened on)

Fn listens for click events in the capture and bubbling phases, respectively

What the user clicks on is what the developer listens for

code

div.addEventLisenter('click',f1)
div.addEventLisenter('click',f2,true)
Copy the code

Will F1 or F2 be executed first?

Answer: F1 is executed first, or f2 if the two rows are switched.

Cancel the bubbling

Capture cannot be cancelled, but bubbling can be

div.stoppropatation()
Copy the code

Interruptible bubbling, which stops the browser from going up, is commonly used to encapsulate some independent components.

You cannot block the default action

Some events cannot block the default action

MDN searches for scroll events, and you can see Bubbles (whether the event Bubbles and all Bubbles can be cancelled) and Cancelable (whether the developer can prevent the default event). Cancelable has nothing to do with Bubbles.

It is better to read the English version, the Chinese version is not complete.

How to Stop scrolling

The Scroll event cannot block the default action

Preventing the default scroll action won’t work because scroll events occur first

To prevent scrolling, organize the default actions for wheel and TouchStart

Note that you need to locate the element where the scrollbar resides. Use CSS to make the scrollbar width: 0

Code sample

The CSS to also go

Use Overflow: Hidden to cancel the scroll bar directly

However, JS can still modify scrollTop

Custom events

Browser Events

More than 100 events in total, click to view MDN

Custom events

Developers can customize an event in addition to their own events

Click to see examples

Event delegation

The scene of a

code

Add click events to 100 buttons

Listen for the ancestor of the 100 buttons and wait for bubbles to determine if Target is one of the 100 buttons.

Scenario 2

code

Listen for click events for elements that do not currently exist

Listen for ancestors and wait until you click to see if you want to listen on the element.

advantages

Save the number of listeners (memory)

You can listen for dynamic elements

Encapsulating event delegate

requirements

Write a function on(‘click’,’#testDiv’,’li’,fn) that calls the fn function when the user clicks on the li element in #testDiv, requiring the event delegate.

code

Answer one: Encapsulate the event delegate code

Target/Target’s father/Target’s grandfather

Integrated into the jQuery

$(‘# XXX ‘).on(‘click’,’li’,fn)

Does JS support events

a

Yes and no.

In this lesson, DOM events are not javascript functions. The term DOM functions provided by browsers (DOM and JS are parallel)

JS simply calls the addEventListener provided by the DOM

q

How do I get JS to support events? Please write an event system.