JavaScript系列之事件类型

时间 2019-11-06

标签 javascript 系列事件类型栏目 JavaScript 繁體版

原文原文链接

JavaScript简单入门能够看看我丑丑的Github博客JavaScript简单入门javascript

本文主要简单介绍如下几类事件：css

UI事件
焦点事件
鼠标与滚轮事件
键盘与文本事件

UI事件

UI事件是指那些不必定与用户操做有关的事件。html

load事件

此事件为当页面彻底加载完以后（包括全部的图像、js文件、css文件等外部资源），就会触发window上面的load事件。
有两种onload事件处理程序的方式。java

//第一种
EventUtil.addHandler(window, "load", function(){
      alert("load");
});
//第二种
<body onload="alert('load')"></body>

图像也能够触发load事件，不管是在DOM中的图像元素仍是HTML中的图像元素。git

//第一种
<img src="smile.png" onload="alert('loaded')">　
//第二种
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
      event=EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

unload事件

此事件在文档被彻底卸载后触发。用户从一个页面切换到另外一个页面就会被触发。
有两种定义onunload事件处理程序的方式。github

//第一种
EventUtil.addHandler(window, "unload", function(){
      alert("load");
});
//第二种
<body onunload="alert('load')"></body>

resize事件

当调整浏览器的窗口到一个新的宽度或高度时，就会触发resize事件。这个事件在window（窗口）上面触发。浏览器

EventUtil.addHandler(window, "resize", function(){
      alert("resized");
});

scroll事件

这个事件会在文档被滚动期间重复被触发，因此应当尽可能保持事件处理程序的代码简单。指针

//能够经过scrollLeft和scrollTop监控变化
EventUtil.addHandler(window, "scroll", function(){
      alert(document.body.scrollTop);
});

焦点事件

焦点事件会在页面元素得到或失去焦点时触发。code

blur事件

在元素失去焦点时触发。这个事件不冒泡，全部浏览器都支持。htm

focus事件

在元素得到焦点时触发。这个事件不冒泡，全部浏览器都支持。

focusin事件

在元素得到焦点时触发。这个事件冒泡,某些浏览器不支持。

focusout事件

在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。
注意：即便blur和focus不冒泡，也能够在捕获阶段侦听到他们。

鼠标与滚轮事件

click事件

用户单击鼠标左键或按下回车键触发

dbclick事件

用户双击鼠标左键触发。

mousedown事件

在用户按下了任意鼠标按钮时触发。

mouseup事件

在用户释放鼠标按钮时触发。

mouseenter事件

在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。

mouseleave事件

元素上方的光标移动到元素范围以外时触发。此事件不冒泡。

mousemove事件

光标在元素的内部不断的移动时触发。

mouseover事件

鼠标指针位于一个元素外部，而后用户将首次移动到另外一个元素边界以内时触发。

mouseout事件

用户将光标从一个元素上方移动到另外一个元素时触发。

mousewheel事件

这个事件跟踪鼠标滚轮。

一次click事件触发顺序
mousedown --> mouseup --> click

键盘与文本事件

keydown事件

当用户按下键盘上的任意键时触发。按住不放，会重复触发。

keypress事件

当用户按下键盘上的字符键时触发。按住不放，会重复触发。

keyup事件

当用户释放键盘上的键时触发。

用户按了一下键盘上的字符键时事件触发顺序 keydown --> keypress--> keyup
若是用户按下字符键不放时，就会重复触发keydown --> keypress
若是用户按下非字符键时，就会触发keydown --> keyup

键码

在触发事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定键对应。