In the first chapter, I learned the basic syntax of JS and some common usages. In the second chapter, I learned DOM, which is node information, and taught us how to get HTML tags in JS. Next, let's study the third chapter, how to operate HTML css styles in JS.
Three, CSS operation
The easiest way to manipulate styles in JS is by obtaining web page element nodes. Then use the setAttribute method to directly manipulate the style attribute of the web page element.
For example: box.setAttribute("style", "width:200px; color:red;"); //box is the node obtained through DOM in the second chapter.
The second way: set the style attribute of the element node. box.style.width="200px"; box.style.color="red";
The third way: set the CssText property. box.style.CssText="width: 200px; color: red;"
Event handler:
Event handlers come in three ways:
HTML event handling:
Direct examples, such as button click event <button onClick="function"/>
<script> function 函数{ } </script>
Its disadvantages: HTML and JS are not separated. The onClick function is used in the button, which belongs to the usage of JS.
DOM level 0 event handling:
It is to put the button click event into JS.
Modify the above code: var btn=document.getElementById("btn");
btn.onclick = function(){ }
Pay attention to this usage, you don't need to write the function name , and onclick is all lowercase. In the HTML event, this is onClick. There is a capital.
Advantages: It solves the shortcomings of HTML event processing and cannot separate JS and HTML.
Cons: Cannot add multiple events at the same time. (For example: now there are multiple same subclass element nodes. It will only work on the event of the first subclass element node.)
DOM level 2 event handling:
Modify the above code directly: var btn=document.getElementById("btn")
btn.addEventListener("click"，function(){ } )
The difference from the above: use addEventListener and click. Not onclick Oh!
Pros: It can add multiple events at the same time.
Event mouse event:
Pay attention to the use of mouse events. If you use DOM level 0 events, you need to add on.
Event event object:
After the event occurs, an event object will be generated and passed to the listening function as a parameter. (Note that it is a generated parameter!)
For example, in event processing: var btn=document.getElementById("btn").
btn.onclick = function(e) { //e is the event object, which represents the click event of btn.
console.log(e.target ) //Return the node where the current object is located. Just return btn.
}
Object properties:
Event.Target
Returns the node the event is currently on. Is it equivalent to getting element nodes from DOM? need to practice
Event.type
Returns the event type.
Object method:
Event.preventDefault()
Cancel the browser's default behavior for the current event, such as: click a link, and then use this method, click the link again, and the jump will not continue.
Event.stopPropagation()
Prevents event bubbling. For example: under normal circumstances, when a subclass is nested by a parent class, when we click on the subclass, it will also run the deep parent class click event. At this time, adding this method in the subclass can prevent such methods from being generated. With that, click on Subcategories. The corresponding method is run only once. For details, see the event agent below. The concept of event bubbling is used.
Event type keyboard event:
Event type: keydown: triggered by pressing.
keypress: Triggered only when a key with a value is pressed. For example: keys with no value such as ctrl and Alt will not trigger.
keyup: Triggered by releasing the keyboard.
Event object: keycode
Rely on unique identification of each key. For example: key a, its value is 65.
Form event of event type:
Event type: input: similar to the previous key event. username.oninput = function(e){ }
select: Triggered when the text is selected
Change: Similar to input, the difference is when it loses focus (mouse clicks elsewhere) or presses the Enter key. He will trigger it.
reset: This and the following events are defined in HTML. I won't talk about it any more.
submit:
Practical training:
Manual operation, only to find that I have a lot of problems.
First, the three input styles of CSS. no problem.
Three input styles for js. no problem.
DOM gets nodes, and uses DOM nodes to change CSS styles. Three ways to change CSS styles using DOM manipulation. (√)
During the operation of the event, some problems were encountered.
The first question: Three ways of event handling. DOM level 0 handles events. Be sure to add on in front of various events.
For example: user.ondblclick = function(){} ; dblclick is a double-click event. In the way of handling events at level 0, on must be added to use.
Second question: keyboard events. Because of keyboard events, no id is used. (<input type="text" name="username">) The way we get nodes is:
var user = document.getElementByName("username"); //Note that the array obtained by ByName. So the use of this method must add an array.
for(var i=0；i<user.length；i++){
user.onkeypress = function(){ console.log( this.value ) } //This must not be missing, otherwise the value will not work.
}
The third question: form events.
username.onselect //This is the selected text. I've always thought of it as a drop-down box.
For form events, there is an element that is used a lot: username.onchange //This usage can be used for text input, press the space to submit. It can also be used as a drop-down box, select the option of the drop-down box to print the option.
Event proxy (event delegation):
In fact, the parent element system handles child element events. Since the event will propagate up to the parent node during the bubbling phase, you can put the listener function of the subclass on the parent node, so that clicking on the child node will only trigger once on the parent node.
Events of multiple child elements are uniformly processed by the listener function of the parent node. This approach is called event delegation.
timer:
setTimeout()：
Delay execution, the unit is ms. Format: setTimeout(function(){ }, 3000);
Pay attention to details: this generally refers to the current object. If it is used in a timer, it will point to a global variable. You can define var that=this. before using this method. Then use that instead.
Its method of canceling the timer is: clearTimeout(~);
setInterval()：
Execute once at an interval, that is, it will be executed countless times.
For example: it can demonstrate animation. For example, the demo opacity keeps getting smaller.
var opacity = 1;
var fade = setInterval(function(){
if(opacity>0){
opacity-=0.05
div.style.opacity = opacity
}else{ //设置当透明度为0时就停止计时器。
clearInterval(fade)
}
},600)Anti-shake:
It is used for performance optimization, for example: only one snap-up is allowed. The button is clicked only once. (prevent multiple requests to the server)
Concept: For events that are triggered continuously in a short period of time, the meaning of anti-shake is to allow the event processing function to be executed only once within a certain period of time.
Throttling:
The function is similar to the anti-shake function, but it is used to press and hold the sliding bar, and keep dragging it, and it can still perform an operation of the event.
