DOM operation of JS - Events

event ： The element is in a certain state （ The implementation of browser is also called event triggering ） When reached , A pre-set procedure to be executed , We call it event handler

Events are a common means of interacting with users

Three important numbers of events ： Event source     Event type     Event handler （handler）

How events are bound ：

1、 Inline ： Write in the line of the label , Its attribute value is the code executed when the event is triggered （ Press js Script execution ）

Code instance ：

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

  The triggered execution code can be a function call ：

<div class="box" onclick="myconsole.mylog();fn()">
			 Am I 1
</div>
	<script>
			var myconsole = {
				mylog: () => {console.log(" I wrote my own function ")}
			}
			function fn(){
				console.log(" I wrote my own function 2")
			}
</script>

2、 Attribute binding ： Only one event handler can be bound

Code instructions ：

 <div class="box">
			 Am I 
</div>
<script>
        var box = document.querySelector(".box")
			box.onclick = function() {
				console.log(" The first event ")
			}
			box.onclick = function() {
				console.log(" The second event ")
			}
</script>

  Running results ：

Why only run the second function ？

because box Point attribute , If there is no such attribute, it will be added and assigned , If so, overwrite . Just like object assignment .

3、 a key ： Use this as much as possible , It can solve the compatibility problem , It is an asynchronous non blocking function

Add an event listener to the element ： Elements .addEventListener(" Event type "," Processing function "), Remember the event type. There is no need to write here on.

An element can be bound to multiple listeners .

 <div class="box">
			 Am I 
</div>
<script>
        var box = document.querySelector(".box")
				box.addEventListener("click",function(){
				console.log(111)
			})
			box.addEventListener("click",function(){
				console.log(222)
			})
			
</script>

Running results ：

  The unbinding method of the event ：

For in-line binding and attribute binding, we unbind by manually leaving empty .

Intra row unbinding ：

 <div class="box" onclick="console.log(66666)">
			 Am I 
</div>
<script>
        var box = document.querySelector(".box")
        //onclick yes box Inline properties of , The element point attribute can be obtained 
		box.onclick=null
</script>

Attribute unbinding ：

 <div class="box">
			 Am I 
</div>
<script>
        var box = document.querySelector(".box")
			box.onclick = function() {
                // After clicking once, you can't click any more 
                box.onclick=null
				console.log(" The first event ")
			}
			
</script>

There is a special method for unbinding the listener ——removeEventListener(" Event type "," Execute function "), If the binding is an anonymous function , Will never be unbound .

Code presentation instructions ：

 <div class="box">
			 Am I 
</div>
<script>
            function fn1(){
				console.log(111)
            }
            function fn2(){
				console.log(222)
			}
        var box = document.querySelector(".box")
			box.addEventListener("click",fn1)
			box.addEventListener("click",fn2)
            box.removeEventListener("click",fn1)
			box.removeEventListener("click",fn2)
</script>