Click Default event when input type is a checkbox or radio

In input, if the type is a checkbox or radio, the browser renders the input as a single or multiple-selection component of the system, and if we bind the click event to this input, use E.preventdefault () carefully. This method (jquery integrates this method so that it can be compatible with removing default events in the browser). The reason to use caution is that if you decide whether the checkbox is selected in the responder of this event, the result will be different from the actual selected state. Let's start with a simple example to illustrate this phenomenon. (For simplicity, I used jquery, which saves the selector part of the code, but does not affect the problem that this article needs to explain). The code snippet is as follows:

<script type= "Text/javascript" >
window.onload=function () {
    $ (' #chk '). On (' click ', Function (e) {
        E.preventdefault ();
        Alert ($ (this). attr (' checked '));}
    );
</script>
 
The simple example is to bind a click event to a checkbox, which is the click event to determine whether the current checkbox is selected. By actually running on the browser, the result is that the checked pops up when the mouse clicks on the checkbox. However, when alert is turned off, the checkbox on the page is unchecked. We are also not going to get the value of this form when it is submitted to the background. Now that we have not chosen, we add this sentence after the alert: $ (this). attr (' checked ', true); Let it be selected, refreshed, and then clicked, and you will notice that the checkbox on the page is still unchecked after we close the alert. Here's the problem, we checked the checkbox through the program, why is the checkbox still unchecked when the response function is finished executing?

To explain the problem, we need to modify the above code:

Window.onload=function () {
    $ (' #chk '). On (' click ', Function (e) {
        e.preventdefault ();
        $ (this). attr (' checked ', true);
        Alert ($ (this). attr (' checked '));}
    );
 
In the above code, we first put the statement that sets check to true before the alert, and run it down to see when we click on the checkbox:


You can see that after executing the $ (this). attr (' checked ', true); when it comes to alert, the checkbox's state is selected, and the state of the popup is checked, which means that the checkbox is selected at this time. But why did we click OK and the checkbox turned back unchecked? At the end of the event, there must be something else to change it back. In fact, this is done by the checkbox's default click event. Perhaps people will ask, I am not through E.preventdefault () to remove the default event. Why there are default events. Did E.preventdefault () not take effect.

Here's what you need to say: The general default event, which is executed after The response event we bind (which is inaccurate, the default event is executed together with the response event of its own binding, except that its true function is usually reflected after all the event content is done, so This is simply understood as executing after the bound event). With this explanation, let's go on to this phenomenon. This is not a browser bug, nor is there a default event that is not banned. Since the checkbox is a component of the system, its implementation mechanism is rather complex and is not discussed here, the main reason is that thedefault event for the Click event of the checkbox is to take the modified selected state into effect . To explain, if the checkbox's status is checked before the mouse click, when the checkbox is clicked, it will uncheck the current state, then execute the response event, and the default event will take effect.

In this code above, because the default event is removed, the checkbox is actually selected when the response event is executed, and the alert is selected, but at the end of the event there is no default event, and the checkbox returns to the state before the click. If we write input as: <input type= "checkbox" id= "chk" checked/>, that is, select it before clicking, then click, the checkbox is the selected state. Of course, this check state is not due to $ (this). attr (' checked ', true); instead of the default event, it resets back to its previous state. Here we change the code to $ (this). attr (' checked ', false); After execution, it will still be selected.

This problem fully reflects the importance of the default event, we have removed a lot of default events before, but most of the default events as we imagined, removed, the basic function will not exist. However, the checkbox's Click Default event is not to make it unresponsive, but to take the modified state into effect (note: Only the Click event, the MouseDown and MouseUp events do not have this feature). So, before we know the problem, there are some problems if the Click event is banned. Of course, this knowledge is for checkboxes and radio. This is confirmed by the documentation of the world-class, which has a clear description of the document:

Note:during The handling of a click event on an INPUT element with a type attribute this has the value "Radio" or "checkb Ox ", some implementations may change the value of the" the "before the event is being dispatched in the document. If the default action of the event is canceled, the value of the "may" changed back to its original value. This means, the value of the during the handling of the click events is implementation dependent.

Original address: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025