event

event listener

1. DOM L0

   1
   <DOM>.on<type>=function(){}

   event will be cover

2. DOM L2

   1
   <DOM>.addEventListener('<type>',<functiion>)

event object

get

1. The first cllback function bound to an event
2. name rule：event​ e​

1
<DOM>.addEventListener('<event>',function(<e>){})

attribute

1. type

2. clientX/ClientY

   get the position of the cursor relative to the visible upper left corner of the browser

3. offsetX/offsetY

   get the position of the cursor relative to the top left corner of the DOM element

4. key

   the value of pressing a key

event flow

The complete proxess of event execution

event capturing

<DOM> executes events starting from the root element (for inside out)

the third parameter of event monitoring is true

event bubbling

<DOM> executes events starting from the outermost(from the outside in)

the third parameter of event monitoring is false or default

stop flow

1
<e>.stopPropagation()

prevent the flow of events

‍

‍

event unbinding

L0

1
<DOM>.on<operate> =null

L2

1
<DOM>.removeEventListener('<operate>',<function>)

mouse passong event

1. mode1

   1
   mouseober

   1
   mouseout

   there will be bubbles

2. mode2(recommand)

   1
   mouserenter

   1
   mouseleave

difference in registration events

1. on

   • using the same object,subsequent registrations will overwrite the previous object
   • using null overwrite can unbind
   • bubble phase execution

2. event listeners

   • grammar

     1
     addEventListener(<type>,<function>,[capture])

   • using the same object,subsequent registrations not will overwrite the previous object

   • the capture staage can be datemined by the third parameter

   • anonymous function cannoy unbind

event delegation

1. delegate object

   entrusted to the parent element

2. searching for the truly triggered element

   1
   <e>.target

block default behavior

1
<e>.preventDefault()

loading event

1. triggered after loading external resources

   event name:load​

2. after the html document is fully loaded and parsed

   event name:DOMcontentLoaded​

scrolling event

evnet name:scroll​

attribute scrolling

the value of movement

1. scrollLeft
2. scrollTop
3. scrollTo(<x>,<y>)

size event

event name:resize​

attribute size

visible values

1. clientWidth
2. clientHeight
3. offsetWidth(only read)
4. offsetHeight(only read)

mobile terminal