Home > Article > Web Front-end > What are the events in javascript
What are the events in javascript
- 醉折花枝作酒筹Original
- 2021-06-11 11:16:434587browse
Javascript includes: 1. UI events; 2. Focus events; 3. Mouse and wheel events; 4. Keyboard and text events; 5. Composite events; 6. Change events; 7. HTML5 events; 8. Device events; 9. Touch and gesture events.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
JavaScript Event Types
There are many types of events that may occur in web browsers. Here I will mainly focus on the following commonly used event types:
UI events
Focus events
-
Mouse and wheel events
Keyboard and text events
Composite events
Changes Events
HTML5 Events
Device Events
Touch and Gesture Events
Part One: UI Events
The UI in the UI event is (User Interface, user interface), which is triggered when the user interacts with the elements of the page sauna.
UI events mainly include load, unload, abort, error, select, resize, and scroll events.
1.load event
This event is when the page is completely loaded (including all images, js files, css files and other external resources), the load event on the window will be triggered.
This event is the most commonly used event in JavaScript. For example, we often use window.onload=function(){};, which is to execute the function after the page is completely loaded.
In addition, I have never known that this event can also be used on other elements, such as image elements, as shown below:
<img src="smile.png" onload="alert('loaded')">
That is, there will be a pop-up window after the image is fully loaded. . Of course, it can also be implemented using JS, as shown below:
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
}); 2.unload event
Obviously, this event is relative to the load event. Fired after the document has been completely unloaded. The unload time is triggered when the user switches from one page to another. The most common use of this event is to clear references to avoid memory leaks.
This event also has two ways to specify. One is the JavaScript method, using EventUtil.addHandler(); the other is to add a feature to the body element.
It is worth noting that you must be careful when writing the code in the onload event, because it is triggered after the page is unloaded, so the objects that exist after the page is loaded may not necessarily exist after the onload is triggered. !
<body onload="alert('changed')">
3.resize event
When the browser window is adjusted to a new width or height, the resize event is triggered. This event is triggered on the window. Therefore, the handler can also be specified through JS or the onresize attribute in the body element.
<body onresize="alert('changed')">
If you write this code, a window will pop up when the size of the browser changes.
4.scroll event
This event will be triggered repeatedly while the document is scrolled, so the code of the event handler should be kept as simple as possible.
Part 2: Focus Events
Focus events are triggered when a page element gains or loses focus. There are mainly the following types:
#blur is triggered when the element loses focus. This event does not bubble and is supported by all browsers.
focus Triggered when an element gains focus. This event does not bubble and is supported by all browsers.
focusin Triggered when an element gains focus. This event bubbles up and is not supported by some browsers.
focusout Fires when an element loses focus. This event bubbles and is not supported by some browsers.
Note: Even if blur and focus do not bubble, they can still be heard during the capture phase.
Part 3: Mouse and Wheel Events
Mouse events are the most commonly used events in Web development, because the mouse is the main positioning device.
click---The user clicks the left mouse button or presses the Enter key to trigger
dbclick---The user double-clicks the left mouse button trigger.
mousedown---Triggered when the user presses any mouse button.
mouseenter---Triggered when the mouse cursor moves from outside the element to within the scope of the element for the first time. This event does not bubble up.
mouseleave---Fired when the cursor above the element moves outside the scope of the element. Not bubbling.
mousemove---Triggered when the cursor moves continuously inside the element.
mouseover---Fired when the mouse pointer is outside an element and then the user moves within the bounds of another element for the first time.
mouseout---Fired when the user moves the cursor from one element to another.
mouseup---Triggered when the user releases the mouse button.
Note: All the above events bubble except mouseenter and mouseleave.
Important: The click event will only be triggered if the mousedown and mouseup events are triggered successively on the same element. Likewise, the dbclick event will only be triggered if the click event is triggered twice on the same element.
dbclick事件的产生过程如下：
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
上面介绍了有关鼠标的事件，下面介绍一些对于鼠标光标的位置：客户区坐标位置、页面坐标位置、屏幕坐标位置
一、客户区坐标位置
通过客户区坐标可以知道鼠标是在视口中什么位置发生的。
clientX和clientY分别表示鼠标点击的位置。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。这两个都是event的属性。举例如下：
<button id="clickMe">点我</button>
<script>
var button=document.getElementById("clickMe");
button.onclick=function(event){
alert(event.clientY+""+event.clientX);
};
</script>当我点击按钮的左上角时，显示为00。效果如下：
二.页面坐标位置
和客户区坐标位置不同，页面坐标位置表示鼠标光标在页面而非视口中的位置。因此坐标是从页面本身而非视口的左边和顶边计算的。如果前面的话不能很好的理解，接着看这里：在页面没有滚动的情况下，页面坐标位置和客户区坐标位置是相同的。
页面坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面坐标位置</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 800px;
height: 1200px;
/*我的电脑的视口高度为960px；*/
background: #ccc;
}
</style>
</head>
<body>
<div></div>
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
alert("pageX为"+event.pageX+"pageY为"+event.pageY);
};
</script>
</body>
</html>在上面的例子中，我把p的高设置为了1200px；而我的浏览器视口高度为960px；所以一定需要滚动我们才能点击按钮，最终得到的结果是：pageX为13pageY为1210。
然而IE8及更早的浏览器是不支持事件对象上的页面坐标的，即不能通过pageX和pageY来获得页面坐标，这时需要使用客户区坐标和滚动信息来计算了。而滚动信息需要使用document.body(混杂模式)、document.documentElement(标准模式)中的scrollLeft和scrollTop属性。举例如下：
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight);
alert("pageX为"+pageX+"pageY为"+pageY);
};
</script>此例子在IE浏览器下可得到同样结果。
三.屏幕坐标位置
与前两者又有所不同，鼠标事件发生时，还有一个光标相对于整个电脑屏幕的位置。通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的位置。举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面坐标位置</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
alert("X为："+event.screenX+"Y为："+event.screenY);
};
</script>
</body>
</html>最终的结果如下：
显然screenX和screenY是相对于屏幕的左方和上方的。
四.修改键
当点击某个元素时，如果我们同时按下了ctrl键，那么事件对象的ctrlKey属性值将为true，否则为false，对于alt、shift、meta（windows键盘的windows键、苹果机的Cmd键）的事件属性altKey、shiftKey、metaKey同样如此。下面举例如下：
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
var array=new Array();
if(event.shiftKey){
array.push("shift");
}
if(event.ctrlKey){
array.push("ctrl");
}
if(event.altKey){
array.push("alt");
}
if(event.metaKey){
array.push("meta");
}
alert(array.join(","));
};
</script>这个例子中，我首先创建了一个array数组，接着如果我按下了那几个键，就会存入相应的名称。这里我同时按下了四个键，结果如下：
即最终将数组中的四个值拼接成了字符串显示出来。
五、相关元素
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onmouseup=function(){
alert(event.button);
};
</script>当我是用左键产生mousedown事件时，弹出窗口为0，中间键为1，右键为2。
七、鼠标滚轮事件
<script>
document.onmousewheel=function(){
alert(event.wheelDelta);
};
</script>当我向下滚动滚轮时，效果如下：
第四部分：键盘和文本事件
该部分主要有下面几种事件：
keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。
这几个事件在用户通过文本框输入文本时才最常用到。
键盘事件：
document.addEventListener("keydown",handleKeyDownClick,false);
function handleKeyDownClick(event) {
var e = event||window.event||arguments.callee.caller.arguments[0];
if (e&&e.keyCode == 13) {
alert("keydown");
}
}【推荐学习：javascript高级教程】
The above is the detailed content of What are the events in javascript. For more information, please follow other related articles on the PHP Chinese website!