This is the 29th day of my participation in the August More Text Challenge
Hi, I’m Ken
Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).
This blog is suitable for just contactJSAnd the friends who want to review after a long time.
🌊🌈
6.4_ Event Basis
If you need to add interactive behavior to an element after you have acquired it, you need to use events to do so.
For example, when the mouse pointer passes a certain item in the navigation bar, the secondary menu will be automatically expanded, or when reading an article, the options such as share and copy will automatically pop up after the text is selected.
6.4.1_ Event Overview
In development, JavaScript helps developers create interactive pages that rely on events to visualize.
An event is a behavior that can be detected by JavaScript and is a “trigger-response” mechanism.
These behaviors refer to specific actions such as page loading, mouse clicking on the page, and mouse pointer sliding across a certain area, which play an important role in realizing the interactive effect of the web page.
6.4.2_ Event Three Elements
In learning about events, we need to have an understanding of some very basic and very important concepts. An event consists of the event source, event type, and event handler, also known as the event elements.
(1) Event source: elements that trigger events.
(2) Event type: for example, click event.
(3) Event handler: the code to be executed after the event is triggered (in functional form), also known as event handler function.
The above three elements can be simply understood as “who triggers the event”, “what event is triggered” and “what should be done after the event is triggered”.
In development, in order for an element to execute specific code when it fires an event, you need to register events for the element and bind event handlers. The steps are to first get the element, then register the event, and finally write the event handling code.
Example: Demonstrate the use of events — bind button click events,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">Click on the</button>
<script>
// Step 1: Get the event source
var btn = document.getElementById('btn');
// Step 2: Register the event btn.onclick
btn.onclick = function() {
// Step 3: Add event handlers (in the form of function assignments)
alert('pop up');
}
</script>
</body>
</html>
Copy the code
In the above code, we define a < button> tag with id BTN. Get the event source BTN by getElementById(). Register the event with the syntax “btn.on event type”. The event type click represents the click event.
Open the case code in a browser and click the button on the page with the mouse. A warning box will pop up indicating that the button on the page has been bound to the click event. Within the event handler, we can write other code that we want to execute when the event is triggered. In addition, there are many other event types besides Click, which will be explained in more detail in a later chapter.
6.5_ Operation elements
In Javascript, DOM manipulation can change the content, structure, and style of a web page.
Next, we’ll show you how to use DOM to manipulate the object attributes of an element, changing its content, attributes, and style.
6.5.1_ Manipulating element content
Common attributes for manipulating element content:
| attribute | instructions |
|---|---|
| element.innerHTML | Sets or returns the HTML between the start and end tags of an element, including the HTML tag, with Spaces and line breaks reserved |
| element.innerText | Set or return the text content of the element. When returned, HTML tags and extra Spaces and line breaks will be removed. Special character escapes will be carried out when setting |
| element.textContent | Sets or returns the text content of the specified node, with Spaces and line feeds |
The attributes in the table above are used differently. The innerHTML is used with the same formatting and tag style. InnerTest is plain text with all formatting and tags removed; The textContent property retains the text format after removing the label.
Example: Output an HTML text to the console using the innerHTML, innerText, and textContent properties.
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
The first parapraph...
<p>
The second Paragraph...
<a href="#">third</a>
</p>
</div>
</body>
</html>
Copy the code6.5.2_ Manipulating Element Attributes
In the DOM, HTML attribute manipulation is the use of JavaScript to manipulate the HTML attributes of an element. An element contains many attributes. For example, for an IMG image element, we can manipulate its SRC and title attributes. Or for the input element, we can manipulate its disabled, Checked, selected properties, and so on.
Example: How to manipulate common element attributes and form element attributes.
1. Attribute manipulation of the IMG element
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="flower">flowers</button>
<button id="grass">A clover</button><br>
<img src="#" alt="" title=Four leaf clovers>
<script>
// 1. Get the element
var flower = document.getElementById('flower');
var grass = document.getElementById('grass');
var img = document.getElementById('img');
// 2. Register event handlers
flower.onclick = function() {
img.src = The '#';
img.title = 'flowers';
}
grass.onclick = function() {
img.src = The '#';
img.title = 'Four-leaf clover';
}
</script>
</body>
</html>
Copy the codeIn the above code, the element is obtained using the querySelector() method. Add onClick events for flower and GRASS event sources. In the handler, pass the “element object. Attribute name “to get the value of the attribute, through” element object. Attribute name = value “to set the image’s SRC and title attributes.
2. Attribute operations on form input elements
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>button</button>
<input type="text" value="Input content" />
<script>
// 1. Get the element
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. Register event handlers
btn.onclick = function() {
input.value = 'Clicked! '; // Use value to change the value in the form
this.disabled = true; // this refers to the caller of the time function BTN
}
</script>
</body>
</html>
Copy the code
Click the “button” :
In the above code, the element is obtained using the querySelector() method. Add an onclick event to the BTN. In the handler, pass the “element object. Property name = value “sets the Disabled and value properties of the input text box. The result is that when the button is clicked, the input text becomes “clicked! “.
6.5.4_ Manipulation of element styles
There are two ways to manipulate element styles, one on the style property and the other on the className property. Let’s explain them separately.
1. Manipulate the style property
In addition to the content and attributes of the element explained above, you can use the “element object style. Style property name “. The style attribute name corresponds to the CSS style name, but you need to remove the hyphen “-” in the CSS style name and capitalize the first letter after the hyphen. For example, to set the font size, the style name font-size corresponds to the style property named fontSize.
Common CSS style names in the style property:
| The name of the | instructions |
|---|---|
| background | Sets or reverts the background property of the element |
| backgroundColor | Sets or returns the background color of the element |
| display | Sets or returns the display type of the element |
| fontSize | Sets or returns the font size of the element |
| height | Sets or returns the height of the element |
| left | Sets or returns the left position of the positioning element |
| listStyleType | Sets or returns the type of list item markup |
| overflow | Sets or returns how to handle content rendered outside the element box |
| textAlign | Sets or returns the horizontal alignment of text. |
| textDecoration | Sets or returns the ornament of text |
| textIndent | Set to return the indentation of the first line of text |
| transform | Apply 2D or 3D transformations to elements |
Example: How to add an element style,
<body>
<div id="box"></div>
<script>
var ele = document.querySelector('#box');
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.transform = 'rotate(7deg)';
</script>
</body>
Copy the codeLines 4 through 6 above are used to style the fetched ELE element object, which is equivalent to adding the following styles to the CSS.
#box {
width: 100px;
height: 100px;
transform: rotate(7deg);
}
Copy the code2. Operate the className property
During the development, if the style is changed a lot, you can change the element style by manipulating the className. The syntax is “element object.classname”. Accessing the value of the className attribute means obtaining the className of the element. If the element has more than one className, separate it with Spaces in className.
Example: How to change the style of an element using className.
(1) Write HTML structure code, the specific example is as follows.
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="first">The text</div>
</body>
Copy the code
Line 9 adds the first class to the div element and sets the style of first in the style.
(2) Click on the div element to change the style of the element.
<script>
var test = document.querySelector('div');
test.onclick = function() {
this.className = 'change';
};
</script>
Copy the codeIn the above code, line 2 gets the div element stored in the test object. Lines 3 to 5 add the onclick event to the text object, and line 4 executes the event handler to set the change class name to the test object using thisclassName, where this refers to the test object.
(3) Add the change class to the style, the style code is as follows.
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
Copy the code
(4) Click the div box, and the browser preview will look like the picture below.
After executing the above code, the original class name first will be changed directly to change. If you want to keep the original class name, you can take a multi-class name selector and modify line 4 of step (2), as shown in the following example.
this.className = 'first change';
Copy the codeAfter the change, you can see on the console that the class of the div element has been changed to < div class = “first change “> text < /div>, keeping the previous class name.
6.5.5_[Case] Displays hidden Text Box Contents
- Case analysis
This example needs to add prompt text to a text box. When you click the text box, the default prompt text inside will be hidden, the mouse pointer away from the text box, the text inside will be displayed.
The specific implementation steps are as follows:
(1) Get the textbox focus event onfocus and out-of-focus event onblur for the element binding.
(2) If you get the focus, you need to determine whether the content in the form is the default text; If it is the default text, clear the form content.
(3) If you lose focus, you need to determine whether the form content is empty; If empty, the content inside the form is changed to the default text.
- Code implementation
Prepare HTML structure, complete the page layout, sample code as follows.
<body>
<input type="text" value="Mobile phone" style="color:999">
</body>
Copy the codeIn the above code, line 2 sets the value of the input textbox. The default content is “phone” and the font color is “#999”.
Write JavaScript code that implements the effect of getting focus, as shown in the following example.
<script>
var text = document.querySelector('input'); // Get the element
text.onfocus = function() { // Register to get the focus event onfocus
if (this.value === 'mobile phone') {
this.value = ' ';
this.style.color = '# 333';
};
</script>
Copy the codeIn the above code, line 2 takes the input element and stores it in the Text object. Lines 3 through 8 register onfocus for the text element to get the focus event. If the value of the text box is the default mobile phone, then the content of the form will be cleared; otherwise, the text color in the text box will be changed.
Let’s continue to write JavaScript code that implements the effect of losing focus, as shown in the following example.
text.onblur = function() { // Register the out-of-focus event onblur
if (this.value === ' ') {
this.value = 'mobile phone';
}
// Losing focus requires lightening the text inside the text box
this.style.color = '# 999';
};
Copy the codeThis code registers the onblur out-of-focus event for the text element. The second to fourth lines of code use the if statement to determine that if the value of the text box is empty, the content in the form will be changed to the default word “mobile phone”. Then use line 6 to change the color of the text inside the text box.
That’s the end of today’s introductory study
Peace
🌊🌈
A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology
Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)
Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (13)
🌊🌈 About postscript:
Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice
Original is not easy, “like” + “attention” thanks for your support ❤