current position:Home>JavaScript operates on these event bases of DOM

JavaScript operates on these event bases of DOM

2022-01-27 04:02:05 InfoQ

review

In the last article, we had a preliminary understanding of  WebApi  These interfaces , I see. Support  WebApi The two core points of  DOM  and  BOM, The last article mainly talked about these methods of obtaining elements , This article will focus on these methods of operating elements .

The basis of the event

summary : In short ,js Let's have the ability to create dynamic pages , Events make it possible to  js  The detected behavior is generally divided into three steps

  • First step : Get the event source
  • The second step : Registration events ( The binding event )
  • The third step : Add event handler ( Take the form of function assignment )

//  Click a button , Pop-up dialog box
// 1、 The event consists of three parts   Event source   Event type   Event handler   be called : Three elements of the event
// (1)、 Event source   The object triggered by the event
// (2)、 Event type   How to trigger   What event   For example, mouse click (onclick)  Or mouse over   Press the keyboard to wait
// (3)、 Event handler   Through a function assignment

var btn = document.getElementById("air")
btn.onclick = function () {
alert(" air ")
}



In addition to these clicks, there are the following commonly used

  • onclick: Click the left mouse button to trigger
  • onmouseover: Mouse over trigger
  • onmouseout: Mouse off trigger
  • onmouseover: Mouse over trigger
  • onfocus: Get mouse focus trigger
  • onblur: Lose mouse focus trigger
  • onmousemove: Mouse movement trigger
  • onmouseup: Mouse pop up trigger
  • onmousedown: Mouse down trigger

var btn = document.getElementById("btn");
//  Mouse click
btn.onclick = function () {
console.log(' I was chosen ')
}

//  Mouse over
btn.onmouseover = function () {
console.log(' You passed me ');
}

//  Mouse away
btn.onmouseout = function () {
console.log(' You left me ')
}

//  Mouse movement
btn.onmousemove = function () {
console.log(' You're moving ');
}


Operational elements
js  Of  DOM  The operation can change the content of the web page 、 Structure and pattern . We can use  DOM  Manipulate elements to change the contents of elements 、 Properties, etc . Note that the following are attributes
Change the content of the element
  • element.innerText
    : Content from start to end , But it removes  html  label , At the same time, spaces and line breaks are removed (innerText Don't recognize html label )

//  Click button  div  Changes in content
// element.innerText ->  Change element content ( Don't change the label )
// element.innerHTML ->  Change element content and labels

var btn = document.getElementById("btn");
var time = document.getElementById("time");

btn.onclick = function () {
time.innerText = "2021-12-08"
console.log(' Current event date ')
}

//  If the page is opened and displayed directly , No need to add registration time  onclick
// time.innerText = '2021-12-08'



  • element.innerHTML
    ( recommend ): Everything from the start position to the end position , Include html label , Keep spaces and line breaks at the same time (w3c  recommend )

// innerHTML  Change elements and content  -> W3C recommend
var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.onclick = function () {
//  Click to change the element and content
div.innerHTML = '<strong style=&quot;color: blue&quot;> Qi li xiang </strong>'
console.log(' The elements and content have been changed ')
}


Attribute operations of common elements
  • innerText、innerHTML  Modify element content
  • src、href
  • id、alt、title

Be careful : The connection property needs to be modified , for example  img.src、img.title


<body>

<button id=&quot;left&quot;> towards the left </button>
<button id=&quot;right&quot;> towards the right </button>
<img id=&quot;img&quot; src=&quot;./img/l.png&quot; alt=&quot;&quot;>

</body>
<script>
var left = document.getElementById(&quot;left&quot;);
var right = document.getElementById(&quot;right&quot;);
var image = document.getElementById(&quot;img&quot;);

//  Click left , Change the picture to the left
left.onclick = function () {
image.src = './img/l.png'
}

//  Right click , Change the picture to the right
right.onclick = function () {
image.src = &quot;./img/r.png&quot;
}
</script>
Form element attribute action
utilize  DOM  You can manipulate the attributes of the following form elements

type、value、checked、selected、disabled

  • display:none( hide )
  • display:block( Show )

<body>
<button id=&quot;btn&quot;> Click button </button>
<input id=&quot;ipt&quot; type=&quot;text&quot; value=&quot; Please enter the content &quot;>
</body>
<script>
var btn = document.getElementById(&quot;btn&quot;);
var ipt = document.getElementById(&quot;ipt&quot;);

btn.onclick = function () {
//  change  input  in  value  Value
ipt.value = ' You haven't entered anything yet '

//  If you want to be disabled after clicking   It can also be used.  this( Refers to the caller of the event function )
btn.disabled = true

// this.disabled = true
}
</script>


Style property operation
adopt  js  Change the size of the element 、 Color 、 Position, etc

  • element.style ——  Inline style operation ( If there are fewer styles , Recommend this )

<body>
 <div id=&quot;container&quot;></div>
</body>

<script>
 //  obtain  div  Elements
 var container = document.getElementById(&quot;container&quot;);

 //  Click to change the color and width
 container.onclick = function () {
 //  Change the color
 container.style.backgroundColor = 'red'
 //  Change width
 this.style.width = '250px'
 }

</script>

<style>
 #container {
 width: 200px;
 height: 200px;
 background-color: skyblue;
 }
</style>



  • element.className ——  Class name style operation ( If there are more styles , Recommend this )

<body>
<div class=&quot;cls1&quot;></div>
</body>

<script>
var cls = document.querySelector('div');
//  Click to modify the style name
cls.onclick = function () {
cls.className = 'cls2'
}
</script>

<style>
.cls1 { 
width: 200px;
height: 200px;
background-color: skyblue;
}

.cls2 {
width: 200px;
height: 200px;
background-color: orange;
}
</style>



Be careful :

  • If the style is changed a lot , You can change the element style by manipulating the class name
  • class  Because it's a reserved word , Because use  className  To manipulate the element class name attribute
  • className  Will directly change the class name of the element , Will override the original class name

copyright notice
author[InfoQ],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270402004238.html

Random recommended