Home > Developer > Web Develop
October 2014 Xin Xing interprets Javascript DOM events and their binding, Xin Xing dom
We can use DOM events to respond to HTML events, just as we write guis in other programming languages. What are HTML events? The following are several common examples, such as webpage recording, image loading, moving the mouse over the element, changing the input text, submitting the form, and clicking the buttons.
The following example shows the following HTML code:
<Html> <p id = "tag" onclick = "this. innerHTML = 'xiaoqian'"> Xin Xing </p> It was originally from Xin Xing. If we click it, it will become "Xiao Qian". The onclick here is actually a click event, and the Javascript code in the double quotation marks is, since it is Javascript code, we may want to write them into the script tag, as shown in the following code:
<Html> <p id = "tag" onclick = "xin (this)"> xin Xing </p> <script type = "text/javascript"> function xin (my) {my. innerHTML = "Xiaoqian" ;}</script>
In fact, the function is the same as the code above. You can also click "Xin Xing" and change it to "Xiao Qian". The above code is written directly into the HTML code. Someone may ask: can this problem be solved directly in Javascript? The answer is yes. The following code:
<Html> <p id = "tag"> Xin Xing </p> <script type = "text/javascript"> document. getElementById ("tag "). onclick = function () {this. innerHTML = "Xiaoqian" ;}; </script> In fact, this is also a binding of DOM, But it completes event binding directly in Javascript. Every time we click "Xin Xing" to trigger this event, this function is used to change the text display information.
In addition to the onclick event, which events are more important? The first is the onload event, which will be triggered when the user enters the page, and onunload will be triggered when the user leaves the page. These two events are good for processing cookies, cookies will be exposed later. There is also an onchange event, which is usually used in combination with verification of input fields. For example, we can use this event in the input box or password box to detect user input information, onmouseover is triggered when the mouse moves over the HTML element, while onmouseout is triggered when the mouse moves over the HTML element. Compared with the onclick process, onmousedown and onmouseup are more meticulous. The former indicates that the button is triggered when you click the button with the mouse, and the latter is triggered when we release the button.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
