JS DOM Event

Source: Internet
Author: User

Binding of events
1-1 HTML Events
Add an event directly within the HTML element tag and execute the script
Syntax: <tag event = "Execute Script" ></tag>
This point
In an event-triggered function, this is a reference to the DOM object

1-2 DOM Level 0 Events
DOM Level 0 Events
1. Getting HTML elements from the DOM
2. (Get HTML elements). event = Execute script
Description
Execution scripts can be encapsulated functions, or they can be anonymous functions
Note: Click on the button, call clickbtn This function, call when the function name does not take (), otherwise when the page refresh will also trigger this function
Get button
Btn=document.getelementbyid ("btn");
function clickbtn () {
Alert ("I am the button")
}
Click the button call clickbtn this function, call when the function name does not take (), or when the page refreshes will also trigger
BTN.ONCLICK=CLICKBTN;

HTML event reason is not recommended:
1. Low efficiency When multiple elements bind the same event
2. It is not recommended to write JS code in the THML element
Event Type
2-1 Event Type-onload
Mouse events
OnLoad: triggered when page loads
OnClick: triggered when mouse clicks
onMouseOver: Mouse Rollover Trigger
onMouseOut: Triggers when the mouse leaves
Onblur: triggers when losing focus
OnChange: Occurs when domain content changes

OnLoad
OnLoad Action on window, triggered when page load is complete
For example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>onload Page Load Events </title>
<script>
Page load when executed, unload page uninstall is not commonly used
Window.onload=function () {
Get box
var Box=document.getelementbyid ("box")
Box.onclick=function () {
Alert ("Wo was clicked")
}
}

</script>
<!--error: Cannot set property ' onclick ' of null-->
<!--reason: The script is executed from the top down, and when the code executes to get box, box--> is not found
<!--solution: Put JS behind the div or use wondow.onload-->
<body>
<div id= "box" > This is a div</div>
</body>
2-2 Event Types-onfocus and onblur
Onfocus for
Input label type is text, password
TextArea label
2-3 Event Type-onchange
Typically used for select elements
or radio button (radio) or check box (checkbox)

2-4 Event Types-onresize and Onscroll
OnSubmit: When the confirmation button in the form is clicked, it is not added to the button, it is added to the form form.
OnMouseDown: Triggers when the mouse button is pressed on the element
OnMouseMove: Occurs when the mouse pointer moves
OnMouseUp: Triggers when the mouse button is released on an element
OnResize: Trigger when resizing the browser window for large hours
Onscroll: Trigger when dragging scroll bar
Keyboard events and KeyCode properties
OnKeyDown: Occurs when the user presses a keyboard key
onkeypress: Occurs when the keyboard is pressed and a key is released
OnKeyUp: Occurs when the keyboard button is released
KeyCode Property
A character code that returns the value of the key when the above three events are triggered, or the code of the key

JS DOM Event

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.