Researching the objects, events, and methods of HTML, thinking from the perspective of JS, what methods are used to trigger what events for the attributes of this tag.
-
Keyboard and Mouse Events
-
Page Window Events
-
Form Events
I. Window Event Attributes#
Events triggered by the window object, executed in the <body>
1. onbeforeprint / onafterprint#
Triggered before/after printing in the browser
<body onbeforeprint="print()">
<script>
function print() {
alert("Before printing!")
}
</script>
The event methods before and after printing are similar; one triggers the event before printing, and the other triggers the onafterprint event after the printing event ends.
2. onbeforeunload / unload#
Events triggered before leaving the page / after leaving the page
Open F12, then refresh or close the browser to trigger the event in the browser.
<script>
window.onbeforeunload = function(){
return "Prompt"
// The returned content will not be displayed,
// It triggers when refreshing or closing the browser, the browser will directly prompt whether to reload, cannot directly return return
}
</script>
3. onerror#
This event can be triggered when an image fails to load; the tags that support this event are only <img>, <object>, <style>
<img src="1.gif" onerror="myfun()">
<script>
function myfun() {
alert("Image error")
}
</script>
1.gif does not exist, thus triggering a myfun() event, popping up a window.
4. onhashchange#
Scripts that occur when the document changes
???
5. onload#
Triggered after the page has finished loading
6. onmessage#
Runs when a message is triggered
???
7. onoffline#
Triggered when the browser is offline
<body onoffline="myfun()">
8. ononline#
Triggered when the browser is online
<body ononline="myfun()">
ononlineandonofflineare triggered when the network disconnects or connects, allowing control over the computer's network to see the effect.
9. onpagehide#
Triggered when the user leaves the webpage, can also be understood as a script that runs when the window is hidden.
Refreshing the page can trigger the event.
10. onpageshow#
Triggered when opening a new page or refreshing.
Equivalent to onload, triggered when loading the page, but behaves differently in different browsers.
The first time the page is loaded,
onpageshowdoes not trigger inIE browser, but triggers in other cases.
11. onresize#
Triggered when the browser window is resized.
<body onresize="myfun()">
<script>
function myfun() {
alert('The browser window has changed')
}
</script>
</body>
12. onunload#
Triggered when the page is downloaded, that is, when refreshing or closing the page.
window.onunload = function() {
return 'Are you sure you want to close?'
}
13. onpopstate#
Scripts that run when the browser window's history changes.
14. onredo#
Triggered when the document executes a redo.
II. Form Event Attributes#
Events triggered within HTML forms, usually used in form elements.
1. onblur#
Script that runs when losing focus.
<input name="int" id="int" onblur="myfun()">
<script>
function myfun() {
var int = document.getElementById('int').value;
document.getElementById('int').value = int.toUpperCase();
}
</script>
Bind an onblur=myfun() event to the input, producing an effect when the input loses focus.
2. onfocus#
Triggered when the element gains focus, opposite to onblur.
3. onchange#
Triggered when the element's value changes.
<input type="text" id="int" name="int" onchange="myfun()">
<script>
function myfun() {
alert('My element has changed!')
}
</script>
This event means that when I change the input content, the browser will pop up an alert.
4. oncontextmenu#
Triggered when the user right-clicks.
Can be bound to any element and can be triggered continuously without refreshing.
<div oncontextmenu="myfun()">This is a text box!</div>
<script>
function myfun() {
alert('oncontextmenu event triggered')
}
</script>
5. onformchange#
Can trigger an event when the form receives input.
Cannot trigger the script.
6. onforminput#
Triggered when the form receives user input, cannot trigger.
Browser not supported.
6. oninput#
Triggered when the element receives user input.
The oninput event is triggered both when input is entered or deleted.
<input type="text" oninput="myfun()">
<script>
function myfun() {
alert('oninput triggered')
}
</script>
onchangeandoninputhave similarities, both trigger events when the text content changes.
However,onchangetriggers only when the input loses focus, whileoninputtriggers immediately.
7. oninvalid#
The oninvalid event must be used with the required attribute.
requiredindicates a required field, andoninvalidis triggered when the element is invalid.
<form>
<input type="text" oninvalid="myfun()" required>
<input type="submit">
</form>
<script>
function myfun() {
alert('Field is empty')
}
</script>
8. onreset#
Triggered when the reset button in the form is clicked.
<form onreset="myfun()">
<input type="text">
<input type="reset" value="reset">
</form>
<script>
function myfun(){
alert('Reset successful')
}
</script>
9. onselect#
Triggered when text is selected.
<input onselect="myfun()" value="Select me">
<script>
function myfun() {
alert('onselect triggered ')
}
</script>
10. onsubmit#
Triggered when the form is submitted.
The event must be bound to the form tag.
<form onsubmit="myfun()">
<!-- Note: The event must be bound to the form tag -->
<input type="text" name="name">
<input type="submit" value="submit">
</form>
<script>
function myfun() {
alert('Submitted')
}
</script>
Note: After submission, the page will automatically refresh, and the document and console's triggered content will refresh immediately, only the alert can stay on the page, waiting for confirmation.
III. Key Keyboard Events#
1. onkeydown#
Triggered when any key is pressed, including system buttons, arrow keys, and function keys.
2. onkeypress#
Triggered when any letter or number key is pressed, but system buttons, arrow keys, and function keys cannot be recognized.
3. onkeyup#
Triggered when any previously pressed key is released.
IV. Mouse Events#
Events triggered using the mouse.
1. onclick#
Event triggered by clicking on an element.
<p onclick="myfun()">Click me</p>
<script>
function myfun() {
alert('Click successful')
}
</script>
2. ondblclick#
Event triggered by double-clicking the mouse.
<div ondblclick="myfun()">Test text!</div>
<script>
function myfun() {
alert('Double-click test successful!')
}
</script>
3. Drag Events#
ondrag/
Event triggered when an element is dragged.
ondragstart/ Script that runs at the start of a drag operation.
ondrop/
Event triggered when an element is being dragged.
ondragend/ Script that runs at the end of a drag operation.
ondragenter/ Script that runs when an element is dragged into a valid drop zone.
ondragleave/ Script that runs when an element leaves a valid drop target.
ondragover/ Script that runs when an element is being dragged over a valid drop target.
4. onmousedown / onmouseup#
Event triggered when the mouse is pressed on an element / event triggered when the mouse is released.
- One triggers at the moment of pressing down.
- One triggers when the mouse is released.
onmouseup has the same effect as onclick, because click is also triggered after clicking.
These two events together are equivalent to a click event, but cannot be used to create the effect of a click event.
5. onmousemove#
Triggered when the mouse moves over an element.
Equivalent to :hover in CSS, but as an event has more flexible and varied uses.
6. onmouseout#
Triggered when the mouse leaves an element.
7. onmouseover#
Triggered when the mouse enters an element.
onmouseoverandonmousemoveare both triggered when the mouse enters an element.
Difference:
1.
overtriggers when entering the element, but does not trigger when moving inside the element.
movetriggers both when entering the element and when moving inside the element.
2.
overtriggers first, thenmovetriggers.
8. onmousewheel#
Event triggered when the mouse wheel is scrolled.
<style>
div {
height: 1000px;
}
</style>
<body>
<div onmousewheel="myfun()">Test</div>
<script>
function myfun() {
alert('onmousewheel')
}
</script>
</body>
Can be triggered every time it scrolls, can be bound to the body.
9. onscroll#
Event triggered when the scrollbar of an element is scrolled.
<div onscroll="myfun()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</div>
<p>Scrolled <span id="ci"></span> times</p>
<script>
x = 0
function myfun() {
document.getElementById('ci').innerHTML = x += 1
}
</script>
This case -- scroll counting.
Difference:
1.wheelis effective when the wheel is scrolled, ineffective when dragging the mouse.
2.onscrollis effective whether scrolling or dragging.