progress events and form events
1. Loading of documents
When a browser loads a page, it loads it in order from top to bottom, loading one line and executing one line. If the js code is written on the top of the page, when the code is executed, the DOM object in the page has not been loaded, and the DOM object will not be obtained normally at this time, resulting in the failure of the DOM operation.
Solution 1: You can jswrite the code below the body
<body> <button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ }; </script></body>
Solution 2: jsWrite the code in the correspondingwindow.onload = function(){} callback function will be executed after the entire page is loaded, so you can ensure that the DOM object has been loaded when the code is executedwindow.onload
<script> window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){};}; </script>
2. Types of progress events
The progress event is used to describe the progress of resource loading. It is mainly triggered by the loading of external resources such as AJAX requests, <img>, <audio>, <video>, <style>, <link>etc., and inherits ProgressEventthe interface. It mainly includes the following events.
abort: Triggered when the loading of external resources is aborted (for example, user cancels). This event is not fired if an error occurs causing an abort.error: Triggered when an external resource cannot be loaded due to an error.load: Triggered when the external resource is loaded successfully.loadstart: Triggered when the external resource starts to load.loadend: Triggered when the external resource stops loading, and the sequence of occurrence is aftererrorthe ,abort,loadand other events.progress: Triggered continuously during the loading of external resources.timeout: Triggered when the load times out.
Note that in addition to resource downloads, these events also exist for file uploads.
Below is an example.
image.addEventListener('load', function (event) {image.classList.add('finished');
});
image.addEventListener('error', function (event) {image.style.display = 'none';
});
The above code adds a Class to the image element after the image element is loaded finished. If the loading fails, set the style of the image element to not display.
Sometimes, the image loading will be completed before the script is run, especially when the script is placed at the bottom of the page, so it is possible loadthat errorthe event listener function will not be executed at all. Therefore, a more reliable way is to use completeattributes to first determine whether the loading is complete.
function loaded() {// ...
}
if (image.complete) {loaded();
} else {image.addEventListener('load', loaded);
}
Since the element node of the DOM does not provide the property of whether there is a loading error, it erroris best to place the event listener function <img>in the HTML code of the element, so as to ensure that it will be executed 100% when a loading error occurs.
<img src="/wrong/url" onerror="this.style.display='none';" />
loadendThe listener function for events can be used instead of the listener function for abortevent, loadevent, errorevent, since it always happens after these events.
req.addEventListener('loadend', loadEnd, false);
function loadEnd(e) {console.log('传输结束，成功失败未知');
}
loadendThe event itself doesn't provide information about why the progress ended, but it can be used to do something that all loading end scenes need to do.
In addition, errorevents have a special property that they do not bubble. Therefore, the event of the child element errorwill not trigger errorthe event listener function of the parent element.
3. Types of form events
3.1 input event
inputEvent Triggered when the value of <input>, <select>, <textarea>changes. For a checkbox ( <input type=checkbox>) or radio button ( <input type=radio>), this event is also fired when the user changes the option. In addition, for contenteditableelements with attributes turned on, events are also fired whenever the value changes input.
inputOne of the characteristics of the event is that it will be triggered continuously. For example, every time the user presses a button, an inputevent will be triggered.
inputEvent objects inherit InputEventthe interface.
This event changeis very similar to the event, except that inputthe event occurs immediately after the value of the element changes, and changeoccurs when the element loses focus, and the content may have changed multiple times at this time. inputThat is, the event fires multiple times if there is a continuous change , while changethe event fires only once when focus is lost.
Below are <select>examples of elements.
/* HTML 代码如下
<select id="mySelect"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
</select>
*/
function inputHandler(e) {console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);
In the above code, when the option of the drop-down box is changed, inputan event will be triggered to execute the callback function inputHandler.
3.2 select event
selectEvent fired when <input>text <textarea>is selected inside a .
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {console.log(e.type); // "select"
}, false);
The selected text can be obtained through the , , and attributes event.targetof the element .selectionDirectionselectionEndselectionStartvalue
3.3 change event
changeEvent Triggered when the value of <input>, <select>, <textarea>changes. The biggest difference between it and inputthe event is that it will not be triggered continuously, and will only be triggered when all modifications are completed. On the other hand, inputthe event must be accompanied by changethe event. Specifically, it is divided into the following situations.
- Fired when a radio or checkbox is activated.
- Fired when the user submits. For example, selection is done from a dropdown list (select), selection is done in a date or file input box.
- Fired when the value of a textbox or
<textarea>element changes and it loses focus.
Below is an example.
// HTML 代码如下
// <select size="1" onchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>
function changeEventHandler(event) {console.log(event.target.value);
}
If you compare the above inputevent examples, you will find that for <select>elements, inputand changeevents are basically equivalent.
3.4 invalid event
When the user submits the form, if the value of the form element does not meet the validation conditions, invalidthe event will be triggered.
<form><input type="text" required oninvalid="console.log('invalid input')" /><button type="submit">提交</button>
</form>
In the above code, the input box is required. invalidIf not filled, when the user clicks the button to submit, the event of the input box will be triggered , causing the submission to be cancelled.
3.5 reset event, submit event
These two events happen on the form object <form>, not on the members of the form.
resetEvent fired when the form is reset (all form members changed back to default values).
submitEvent fired when form data is submitted to the server. Note that submitthe event occurs on <form>the element, not <button>the element, because the form is submitted, not the button.
at last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free