当前位置：网站首页>DOM events of DOM series

DOM events of DOM series

2022-07-20 11:59:00 【Old__ L】

Catalog

1、 Summary of events
2、 Three elements of the event
- 2.1、 Example
3、 Steps to execute the event
- 3.1、 Example
4、 Common events
Postscript

1、 Summary of events

JavaScript It gives us the ability to create dynamic pages , And events can be JavaScript Detected behavior .

Simple understanding ： Trigger — Response mechanism .

Every element in a web page can generate something that can trigger JavaScript Events , for example , We can generate a... When the user clicks a button event , And then do something .

2、 Three elements of the event

Event source （ who ）： The element that triggered the event
Event type （ What event ）： for example click Click event
Event handler （ Zuosa ）： The code to execute after the event is triggered ( Function form ), Event handler

2.1、 Example

<body>
	<button id="btn"> Tang Bohu </button>
	<script> //  Click a button , Pop-up dialog box  // 1.  The event is made up of three parts   Event source   Event type   Event handler   We also call it the three elements of an event  //(1)  Event source   The event is triggered by   who   Button  var btn = document.getElementById("btn"); //(2)  Event type   How to trigger   What event   For example, mouse click (onclick)  Or mouse over   Or press the keyboard  //(3)  Event handler   By means of a function assignment   complete  btn.onclick = function () {
       alert(" Some autumn fragrance "); }; </script>
</body>

3、 Steps to execute the event

1、 Get the event source ;
2、 Registration events （ The binding event ）;
3、 Add event handler （ Take the form of function assignment ）;

3.1、 Example

<body>
	<div>123</div>
	<script> //  Perform event steps  //  Click on div  Console output   I was chosen  // 1.  Get the event source  var div = document.querySelector("div"); // 2. The binding event   Registration events  // div.onclick // 3. Add event handler  div.onclick = function () {
       console.log(" I was chosen "); }; </script>
</body>

4、 Common events

4.1、onclick

Click the left mouse button to trigger

4.2、onmouseover

Mouse over trigger

4.3、onmouseout

Mouse off trigger

4.4、onfocus

Get mouse focus trigger

4.5、onblur

Lose mouse focus trigger

4.6、onmousemove

Mouse movement trigger

4.7、onmouseup

Mouse pop up trigger

4.8、onmousedown

Mouse down trigger

Postscript

If you feel the article is not good //(ㄒoㄒ)//, Just leave a message in the comments , The author continues to improve ;o_O???
If you think the article is a little useful , You can praise the author ;\\*^o^*//
If you want to progress with the author , Sure Wechat scan QR code , Focus on the front-end old L;~~~///(^v^)\\\~~~
Thank you readers (^_^)∠※！！！

Insert picture description here