💻[JavaScript]Common Events 🏠Column: JavaScript
👀Personal homepage: star learning programming🍁
🧑Personal Profile: An ordinary person who keeps improving himself🚀
🔊Sharing direction: Currently focusing on the front end, other knowledge will be shared in stages🍀
👊Motto: ☀️ There is no impossible road, only those who dare not go! ☀️
👉Let's make progress together and become a better version of ourselves! ! ! 🎁
[JavaScript] common events (mouse, keyboard, form, etc.)
1. Common mouse events
| mouse event | describe |
|---|---|
| onclick | Triggered by left mouse click |
| ondblclick | Triggered by double-clicking the left mouse button |
| oncontextmenu | Triggered by right mouse click |
| onmouseover | mouseover trigger |
| onmouseout | mouseout trigger |
| onmouseenter | mouseover event |
| onmousele | mouse out event |
| onfocus | get mouse focus trigger |
| onblur | Triggered by losing mouse focus |
| onmousemove | Triggered by mouse movement |
| onmouseup | mouse up trigger |
| onmousedown | mouse down trigger |
The difference between onmouseenter and onmouseleave and onmouseover and onmousemove:
- onmouseover and onmouseout can still be triggered when the mouse moves over the child element
- onmouseenter and onmouseleave will not trigger when the mouse moves into a child element
2. Common keyboard events
keyboard events
- Keyboard events can be bound to all elements, not all elements can trigger keyboard events
- Generally bind keyboard elements to window/document/form elements
- Keyboard events do not consider Chinese
| keyboard events | describe |
|---|---|
| onkeydown | keyboard press event |
| onkeyup | keyboard up event |
| onkeypress | keyboard typing event |
Note: the content pressed by the onkeypress event must be consistent with the content that appears
3. Common form events
| form event | describe |
|---|---|
| onfocus | formspace gets focus |
| onblur | form loses focus |
| onchange | Form content changes |
| oninput | form input event |
| onsubmit | form submit event |
| onreset | form reset event |
be careful:
- onchange: It will be triggered when the text box requires to get the focus and lose the focus.
- oninput: Triggered whenever an input or delete is entered
- Both form submission and reset must be bound to the form field
4. Common touch events
| touch event | describe |
|---|---|
| ontouchstart | start touching |
| ontouchmove | touch to move |
| ontouchend | touch end |
5. Common drag events
| drag event | describe |
|---|---|
| ondragstart | start dragging |
| ondrag | Drag and drop |
| ondragend | end drag |
| ondragenter | Triggered when the dragged element enters the range of the dragged and dropped element |
| ondragleave | Triggered when the dragged element leaves the scope of the dragged element |
| ondragover | Triggered when the dragged element completely enters the element range |
| ondragdrop | Triggered when the dragged element is released within the scope of the dragged element |
Note: If you want the drop event to take effect, you need to prevent the default behavior of the dragover event
<p></p>
<!-----Dividing line----->
p.ondrop = function() {
console.log("drag the element in and let go");
};
Case: drag and drop elements
analysis of idea:
/*
case drag
1. When to trigger the effect
1) mouse down
2) mouse up
3) mouse movement
2. What range triggers the effect
1) mouse down div
2) mouse up div
3) mouse move document
3. what effect
1) The mouse is pressed to ensure that the div can be dragged
2) Raise the mouse to ensure that the div cannot be dragged
3) mouse movement set div top left
Get the position of the cursor from the upper left corner of the window when moving - the initial position of the cursor from the upper left corner of the element
*/
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
<body>
<div></div>
</body>
<script>
// 0 get element
var div = document.querySelector("div");
// 0 ready variable
var flag = false; // Default elements are not draggable
var startX = 0;
var startY = 0;
// 1. Mouse down
div.onmousedown = function (e) {
// turn on the switch
flag = true;
// The position of the mouse from the upper left corner of the element at the beginning of the recording
startX = e.offsetX;
startY = e.offsetY;
};
// 2. Mouse up
div.onmouseup = function () {
// switch off
flag = false;
};
// 3. Mouse movement
document.onmousemove = function (e) {
// Can't drag if the switch is off
if (!flag) {
// If the code enters here, it means that the switch is off, that is, the mouse is lifted and cannot be dragged
return;
}
// Indicates that it can be dragged
console.log("can be dragged");
// Set the top left of the div
// Get the position of the cursor from the upper left corner of the window when moving - the initial position of the cursor from the upper left corner of the element
var x = e.clientX - startX;
var y = e.clientY - startY;
div.style.top = y + "px";
div.style.left = x + "px";
};
</script>
Renderings:
Conclusion:
I hope it can help you a little bit, and welcome friends to correct me if I make any mistakes.
👍Like: Your appreciation is my motivation!
⭐Favorites: Your support is the source of my creation!
✍Comments: Your suggestions are good medicine for my improvement!
work hard together! ! ! 💪💪💪