Home > Developer > Web Develop
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
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
