DOM - Events

One 、 Concept ：

event ：

• Function in a certain state ( Event triggered ) Called under ,JS Captured behavior on the web , Called event handler

The three elements of the event ：

• Event source
• Event type
• Event handler (handler)

Two 、 How events are bound ：

 1、 In line binding ：

• Write a flag on the event value in the label line "javaScript:js Code "

<button onclick="console.log(' You triggered the event ')"> Click on </button>
<a href="javaScript:alert(' You triggered the event ')"> Click on -> Popup </a>
<style>
  .div{
    width: 200px;
    height: 200px;
    background-color: palegreen;
 }
</style>
<div class="div" onclick="fn();fn1()"> Bind multiple functions </div>
<script>
  function fn(){
       console.log("1")
  }
  function fn1(){
       console.log("2")
  }
</script>

2、 Element attribute binding ：

• Only one handler can be bound el.onxxx=function(event){}

<div class="box">haha</div>
<script>
var box = document.querySelector(".box")
box.onclick = function() {
	console.log(" Element attribute binding ")
}
</script>

3、 Add an event listener to the element ：

• el.addEventListener(type,fn,false) Try to use this way

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.addEventListener("click",function(){  
		console.log("no haha")
},false)    // The third parameter indicates whether the capture phase triggers , When the third parameter is set to true When, the event is executed at the time of capture 
</script>

3、 ... and 、 The unbinding method of the event

 1、 Unbound events bound to attributes in the row

• el.οnclick=false/''/null

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.onclick=function(){
       box.onclick=null;
       console.log(" Only one time ") 
}
</script>

  2、 Unbind the event listener ： Remove the corresponding listener of the corresponding element

•  el.removeEventListener(type,fn,false)

<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
function fn1 () {
   console.log("1")
 }
function fn2 () {
   console.log("2")
}
box.addEventListener("click",fn1)
box.addEventListener("click",fn2)
box.removeEventListener("click",fn1)
</script>

Four 、 Type of event

 1、 Mouse events

• click  

<style>
.box {
	width: 300px;
	height: 300px;
	background-color:pink;
	cursor: pointer;
}
</style>
<div class="box">haha</div>
<script>
var box=document.querySelector(".box")
box.addEventListener("click",()=>{
		console.log(" When the mouse is pressed and released   The mouse pointer is inside the selected element area ")
})
</script>

• dblclick

box.addEventListener("dblclick",()=>{
	console.log(" When double clicking the mouse   The mouse pointer is inside the selected element area   And the time interval between two clicks cannot be too long ")
})

•   mousedown： Press the mouse once and it will only be triggered once

box.addEventListener("mousedown",()=>{
		console.log(" Press the mouse in the selected element ")
})

•   mouseup

box.addEventListener("mouseup",()=>{
	 console.log(" Release the mouse in the selected element ")
})

• mouseover

box.addEventListener("mouseover",()=>{
		console.log(" The mouse enters the selected element ")
})

• mousemove  

box.addEventListener("mousemove",()=>{
				console.log(" The mouse moves within the selected element ")
			})

• mouseleave

box.addEventListener("mouseleave",()=>{
		   console.log(" The mouse goes out from the selected element ")
})

•  mouseenter

box.addEventListener("mouseenter",()=>{
			console.log(" The mouse goes in from the selected element ")
})

• mouseout   

box.addEventListener("mouseout",()=>{
		console.log(" The mouse goes out from the selected element ")
})

  2、 Keyboard events

• keydown

box.addEventListener("keydown",function(){
			console.log(" Press the keyboard ")
})

• keyup

box.addEventListener("keyup",function(){
	console.log(" The keyboard is released ")
})

• keypress

box.addEventListener("keypress",function(){
		console.log(" Press the keyboard ")
})

keydown and keypress The difference between ：

• keydown Can respond to any key ( except Fn key )    Commonly used for binding operation event processing
• keypress Can only respond to character keyboard keys （event.charCode） return ASCII code It is often used for binding character type event processing  

  3、 Input box Events

• input： monitor input The text change of the box in the focused state

box.addEventListener("input",function(){
        console.log(" The input box triggers at the time of input ")
})

• focus： Only trigger once at the moment of focus

box.addEventListener("focus",function(){
        console.log(" Triggered when the input box obtains the focus ")
})

• blur： Only trigger once at the moment of out of focus

box.addEventListener("blur",function(){
      console.log(" Triggered when the input box is out of focus ")
 })

• change： monitor input The text of the box changes after out of focus

box.addEventListener("change",function(){
  console.log(" The input box is out of focus and value change ")
})

4、 Other events

• onwheel： When the wheel of the mouse slides

box.onwheel=function(){
		console.log(" When the mouse scrolls   The mouse pointer is inside the selected element ")
}

• onscroll： Often used to bind in window On the object , Triggered when scrolling the mouse

window.onscroll=function(){
	console.log(" The element's own scroll bar scrolls    The position of the scroll bar changes in unit time ")
})

• onload： Wait until the web resources are downloaded

window.onload=function(){
	console.log(" Execute after the browser is loaded :5 Big BOM The function of is loaded ")
}

5、 ... and 、 The object of the event

The event object stores the relevant information when the event occurs (handler Function internal incoming data )

1、 When the mouse event is triggered

• altKey When mouse event occurs   Whether to press alt key   Returns a Boolean value

• ctrlKey When mouse event occurs   Whether to press ctrl key   Returns a Boolean value

• metaKey   When mouse event occurs   Whether to press windows/commond key   Returns a Boolean value

• shiftKey When mouse event occurs   Whether to press shift key   Returns a Boolean value

• pageX  pageY Mouse click on X Y coordinate ( contain body Hidden )

var box=document.querySelector(".box")
box.addEventListener("click",function(e){
		console.log(e.pageX,e.pageY)
}) 

• clientX clientY  Returns the coordinates of the mouse position relative to the upper left corner of the browser window   In pixels ( barring body Hidden )

var box=document.querySelector(".box")
box.onmousemove=function(e){
	    console.log(e.clientX,e.clientY)
}

• screenX  screenY  Returns the coordinates of the mouse position relative to the upper left corner of the screen   In pixels

var box=document.querySelector(".box")
box.onmousemove=function(e){
		console.log(e.screenX,e.screenY)
}

• movementX  movementY  Return a displacement value   In pixels   Indicates the current position and the previous

var box=document.querySelector(".box")
box.onmousemove=function(e){
		console.log(e.movementX,e.movementY)
}

• mousemove The distance between events （ Change quantity ）

• offsetX/offsetY  Relative to the element itself x/y It has nothing to do with whether it is a positioned element

var box=document.querySelector(".box")
box.addEventListener("click",function(e){
			console.log(e.offsetX,e.offsetY)
}) 

2、 When a keyboard event is triggered

box.onkeydown=function(e){ 
console.log(e,e.keyCode,e.target.value) // You can view the relevant information of the triggered key, such as ：keyCode、target etc. 
}

6、 ... and 、 In the event this

1. inline :

<button id="btn" onclick="fn(this)">haha</button>
<script>
function fn(e){
     console.log(e,this)  //<button id="btn" onclick="fn(this)">haha</button>,window
}   
// When binding in line    The environment object in the line is button 
</script>

2. Element attributes : this Pointing to dom The element itself The event object is a formal parameter

<button id="btn">haha</button>
<script>
var btn=document.querySelector("#btn")
btn.onclick=function(e){
		console.log(e,this)  // Event object PointerEvent,<button id="btn">haha</button>
}
</script>

3.addEventListener: this Pointing to dom The element itself The event object is a formal parameter

<button id="btn">haha</button>
<script>
var btn=document.querySelector("#btn") 
btn.addEventListener("click",function(e){
	console.log(e,this)  // Event object PointerEvent,<button id="btn">haha</button>
 })
</script>

7、 ... and 、 Box model

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.clientWidth： Width of itself + Left and right inner margins

el.clientHeight： Its height + 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.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

clientTop： Thickness of the top border of the element , When the thick bottom of the border is not specified , It's usually 0

scrollTop： The distance between the top of the object and the top of the visible content in the window is the height hidden after scrolling

offsetTop： Object relative to offsetParent Property (css Positioning elements or body Elements ) The height from the top

offsetHeight： Object relative to offsetParent Property (css Positioning elements or body Elements ) Height

• IE、Opera Think offsetHeight = clientHeight + Scroll bar + Frame
• FF Think offsetHeight Is the actual height of web content , Can be less than clientHeight
• In the new version of FF and IE It's the same in Indicates the height of the web page It has nothing to do with scrollbars chrome Scrollbars are not included in

scrollHeight：IE、Opera Think scrollHeight Is the actual height of web content Can be less than clientHeight

                        FF Think scrollHeight Is the height of web content , But the minimum is clientHeight

clientHeight： The height of the visible area of the content is the height of the area where the content can be seen in the page browser  

                        Generally, it is the area from the bottom of the last toolbar to the top of the status bar It has nothing to do with the content of the page

clientX、clientY： Relative to the viewable area of the browser window X,Y coordinate （ Window coordinates ）

                                The viewable area does not include toolbars and scrollbars

pageX、pageY： Be similar to event.clientX、event.clientY, But it uses document coordinates instead of window coordinates   

offsetX、offsetY： Relative to the event source element （target or srcElement） Of X,Y coordinate

                                Only IE The incident has this 2 Attributes , Standard events have no corresponding properties

screenX、screenY： Relative to the top left corner of the user display screen X,Y coordinate