DOM -- event syntax

event : The element is in a certain state ( Browser implementation is also called event triggering ) When reached   Set the procedure in advance to be executed    We call it event handler

There are three ways to bind events

The first one is ： Inline

<div class="box" onclick="console.log(66666)">
			hello2
		</div>

Write directly inside the label js Code , Select the event to bind

You can bind multiple events at once

The second kind ： Attribute binding

	var box = document.querySelector(".box")
			box.onclick = function() {
				console.log(" You bought equipment ")
			}

stay js First get the element to be bound , Setting binding events , And function

Only one event can be bound at a time , But you can call another function in the function of the event

The third kind of ： Monitor

box.addEventListener("click",fn1)

The first parameter represents the trigger condition of the event , The second parameter represents the function after the trigger condition

It should be noted that the click event of the listener is click, The first two are onclick

A listener can only bind one event , But you can bind multiple listeners

Let's talk about unbinding

For example, when grabbing red envelopes , After you click to grab a red envelope , The red envelope turns gray , Cannot trigger the click event . This is the unbinding of click events .

Unbound use of inline and attribute binding

box.οnclick=null

And the unbinding use of the listener

box.removeEventListener("click",fn1)

Of course, there are many other event types besides our click event types , Let's understand one by one

click：

When the mouse is pressed and released    The mouse pointer is inside the selected element area （ single click ）

dblclick：

When the mouse is pressed for the first time and released for the second time    The mouse pointer is inside the selected element area   And the time interval should not be too long （ double-click ）

mousedown：

Press the mouse in the selected element

mouseup：

Release the mouse in the selected element

mouseover：

The mouse enters the selected element

mouseout：

The mouse goes out from the selected element

mouseleave：

The mouse goes out from the selected element

mouseenter：

The mouse goes in from the selected element

（ Pay attention to the above four relationships between their father and son , That is to say, from element to parent element , What's the difference between entering the parent element from the outside ）

onwheel：

When the mouse scrolls   The mouse pointer is inside the selected element

scroll：

The element's own scroll bar scrolls , The position of the scroll bar changes in unit time

keydown：

Press the keyboard of the input box

keyup：

The keyboard of the input box is released

keypress：

Press the keyboard of the input box

input：

The input box triggers when you enter

change：

The input box is out of focus and value change

focus：

Triggered when the input box obtains the focus

blur：

Triggered when the input box is out of focus

onload：

Execute when loading is complete

Another one involves the box model object ：

el.offsetWidth： The width of itself + Border line + Left and right inner margins ;

el.offsetHeight： Its own height + Border line + Up and down inside margin ;

el.offsetTop： The upper offset of the positioning attribute relative to the first parent node ;

el.offsetLeft： The left offset relative to the parent node with positioning attribute ;

el.clientWidth： Width of itself + Left and right inner margins ; el.clientHeight：

Its height + Up and down inside margin ;

el.clientTop： The width of the top border line

el.clientLeft： Width of the left border line

el.scrollWidth： The actual width of the box ( Including the invisible part of the scroll bar , Excluding sidelines )

el.scrollHeight： The actual height of the box ( Including the invisible part of the scroll bar , Excluding sidelines )

el.scrollTop： How far the scroll bar scrolls down ;

el.scrollLeft： How far the scroll bar scrolls to the right ;

window.innerHeight： The height of the visible area of the browser window ;

window.innerWidth： The width of the visible area of the browser window ;