JavaScript事件类型
浏览器中的事件有很多，在这我只记录了常用的一些事件。详细内容请前往MDN查看。
资源事件
onload 事件
onload 事件会在页面或图像加载完成后立即发生。
在 HTML 中:
1 | <body onload="loadHtml()">
|
2 | <script >
|
3 | function loadHtml() {
|
4 | console.log('页面已加载')
|
5 | }
|
6 | </script>
|
7 | </body>
|
在 javascript 中可以这样使用:
1 | window.onload = function () {
|
2 | console.log('资源已加载')
|
3 | }
|
unload 事件
当一个页面关闭，或者跳转到其他页面将触发unload事件
1 | window.addEventListener('unload', function(event) {
|
2 | console.log('再见！');
|
3 | });
|
视图事件
resize 事件
当浏览器的窗口大小被重置时，就会触发onresize事件
1 | window.onresize = function() {
|
2 | console.log('窗口在变化')
|
3 | }
|
onscroll 事件在元素滚动条在滚动时触发
1 | var object = document.getElementById('list')
|
2 | object.onscroll=function(){
|
3 | console.log('滚动事件')
|
4 | };
|
5 | object.addEventListener("scroll", function () {
|
6 | console.log('滚动事件')
|
7 | });
|
焦点事件
焦点事件会在页面元素获得或失去焦点时触发。
blur 事件
在元素失去焦点时触发。
1 | <input type="text" class="input">
|
2 | <script >
|
3 | document.getElementById("input").onblur=function(){
|
4 | console.log('失去焦点')
|
5 | };
|
6 | </script>
|
focus 事件
在元素获得焦点时触发
1 | <input type="text" class="input">
|
2 | <script >
|
3 | document.getElementById("input").onfocus=function(){
|
4 | console.log('获得焦点')
|
5 | };
|
6 | </script>
|
鼠标事件
click 事件
在元素上按下并释放任意鼠标按键。
1 | document.getElementById('btn').onclick=function(){
|
2 | console.log('点击事件')
|
3 | };
|
dblclick 事件
在元素上双击鼠标按钮
1 | document.getElementById('btn').ondblclick=function(){
|
2 | console.log('双击事件')
|
3 | };
|
mousedown 事件
鼠标按下事件
1 | document.getElementById('btn').onmousedown=function(){
|
2 | console.log('鼠标按下事件')
|
3 | };
|
mouseenter 事件
指针移到有事件监听的元素内，只会在进入时触发一次。
1 | list.onmouseenter = function () {
|
2 | console.log("鼠标移入");
|
3 | };
|
4 | list.addEventListener("mouseenter", function () {
|
5 | console.log("鼠标移入");
|
6 | });
|
mouseleave 事件
指针移出元素范围外，只会在进入时触发一次。
1 | list.mouseleave = function () {
|
2 | console.log("鼠标移出");
|
3 | };
|
4 | list.addEventListener("mouseleave", function () {
|
5 | console.log("鼠标移出");
|
6 | });
|
mousemove 事件
指针在元素内移动时持续触发.
1 | object.addEventListener("onmousemove", function (e) {
|
2 | let oEvent = e||window.event||event;
|
3 | console.log("坐标值:X:" + oEvent.clientX + " Y:" + oEvent.clientY);
|
4 | });
|
5 | object.onmousemove = function (e) {
|
6 | let oEvent = e||window.event||event;
|
7 | console.log("坐标值:X:" + oEvent.clientX + " Y:" + oEvent.clientY);
|
8 | };
|
mouseover 事件
指针移到有事件监听的元素或者它的子元素内,在它的子元素之间移动也将触发事件.
1 | list.onmouseover = function () {
|
2 | console.log("鼠标进入");
|
3 | };
|
mouseout 事件
指针移出元素，或者移到它的子元素上，在它的子元素之间移动也将触发事件。
1 | list.addEventListener("mouseout", function () {
|
2 | console.log("鼠标移出1");
|
3 | });
|
mouseup 事件
释放鼠标时触发
1 | list.addEventListener('mouseup',function () {
|
2 | console.log("松开了鼠标");
|
3 | })
|
select 事件
select 事件会在文本框中的文本被选中时发生.
1 | input.onselect = function(e){
|
2 | console.log(`触发了选中事件`)
|
3 | }
|
wheel 事件
wheel 事件在鼠标滚轮在元素上下滚动时触发。
1 | object.addEventListener("wheel", function () {
|
2 | console.log("鼠标滚轮事件");
|
3 | });
|
拖放事件
drag 事件
正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次）
1 | p.addEventListener("drag", function () {
|
2 | console.log("拖放事件");
|
3 | });
|
dragend 事件
拖放操作结束。（松开鼠标按钮或按下 Esc 键）
1 | p.addEventListener("dragend", function () {
|
2 | console.log("拖放结束事件");
|
3 | });
|
dragenter 事件
被拖动的元素或文本选区移入有效释放目标区
dragstart 事件
用户开始拖动HTML元素或选中的文本
dragleave 事件
被拖动的元素或文本选区移出有效释放目标区
dragover 事件
被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）
drop 事件
元素在有效释放目标区上释放
键盘事件
keydown 事件
按下任意按键。
1 | document.addEventListener("keydown", function keydown(event) {
|
2 | console.log(event.keyCode);
|
3 | });
|
keypress 事件
除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。）
1 | document.addEventListener("keypress", function keydown(event) {
|
2 | console.log(event.keyCode);
|
3 | });
|
keyup 事件
释放任意按键
1 | document.addEventListener("keyup", function keydown(event) {
|
2 | console.log('释放按键');
|
3 | });
|
在用户输入时触发。
1 | input.addEventListener("input", function () {
|
2 | console.log("输入事件");
|
3 | });
|
剪贴板事件
cut 事件
已经剪贴选中的文本内容并且复制到了剪贴板。
1 | input.addEventListener('cut',function (e) {
|
2 | console.log('剪切文本')
|
3 | })
|
copy 事件
已经把选中的文本内容复制到了剪贴板。
1 | input.addEventListener('copy',function (e) {
|
2 | console.log()
|
3 | console.log('拷贝文本:'+e.target.value)
|
4 | })
|
paste 事件
从剪贴板复制的文本内容被粘贴。
1 | input.addEventListener('paste',function () {
|
2 | console.log('黏贴了文本')
|
3 | })
|
媒体事件
canplay 事件
可以开始播放视频/音频（audio/video）时触发
1 | <audio id="audio" src="" oncanplay="play"></audio>
|
2 | <script>
|
3 | var audio = document.getElementById("audio");
|
4 | audio.addEventListener("canplay", function () {
|
5 | console.log("可以开始播放视频");
|
6 | });
|
7 | </script>
|
ended 事件
在视频/音频（audio/video）播放结束时触发
1 | object.addEventListener("ended", function(){
|
2 | console.log('视频已播放结束')
|
3 | });
|
error 事件
在视频/音频（audio/video）数据加载期间发生错误时触发。
1 | object.addEventListener("ended", function(){
|
2 | console.log('视频加载出现问题')
|
3 | });
|
play 事件
在视频/音频（audio/video）开始播放时触发。
pause 事件
在视频/音频（audio/video）暂停时触发。
playing 事件
在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
seeked 事件
在用户重新定位视频/音频（audio/video）的播放位置后触发。
volumechange 事件
在视频/音频（audio/video）的音量发生改变时触发。
timeupdate 事件
在视频/音频（audio/video）当前的播放位置发送改变时触发。
触摸事件
touchstart 事件
手指刚接触屏幕时触发
touchend 事件
手指从屏幕上移开时触发
touchmove 事件
手指在屏幕上移动时触发
touchcancel 事件
触摸过程被系统取消时触发