JavaScript 事件类型
来源：互联网 发布：淘宝上的咸鱼在哪 编辑：程序博客网 时间：2024/05/25 19:59
JavaScript 事件类型
JavaScript 可以处理的事件类型有很多，常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。
注：冒泡事件即：事件会从层级高的传递给层级低的。
具体事例解释如下：
1、onload事件
load事件会在页面或图像加载完成立即执行。
示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //方法1：给window的onload属性设置函数 window.onload = function () { // 函数在页面执行完毕之后自动执行。 alert("页面加载完毕") }; </script></head ><!--方法2： HTML事件处理： 给body 的onload属性直接设置 JavaScript代码， 也可以调用函数--><body onload="alert('页面加载完毕！')"><img src="test.jpg" onload="{alert(' 图像加载完毕！')}"></body></html>2、onscroll事件
onscroll事件，当滚动条或滚动式触发。事件在window上面触发。由于滚动过程中，会重复多次调用，所以，处理逻辑和代码不能过于复杂，否则会影响用户滚动效果。
<script type="text/javascript"> window.onscroll = function () { console.log("开始滚动..."); //获取滚动距离。 //document.body.scrollTop: 只支持chorme，火狐和ie不支持， document.documentElement.scrollTop ie和火狐支持 chrome不支持 //得滚动的距离(兼容所有浏览器) console.log(document.documentElement.scrollTop || document.body.scrollTop); }</script>3、onresize事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。这个事件在 window （窗
口）上面触发。所以也可以在body元素中使用 onresize 属性来指定事件处理程序
<script type="text/javascript"> //当窗口发生变化的时候，可以获取浏览器新的可视宽和高做相应的操作 window.onresize = function () { var width = window.innerWidth || document.documentElement.clientWidth ; var height = window.innerHeight || document.documentElement.clientHeight; console.log("窗口发生了变化" + "宽：" + width + "；高：" + height); } </script>4、onfocus(获得焦点)事件
当元素获得焦点时触发。这个事件可以发生在任何的元素上，但一般情况下只有输入框才有焦点。
这个事件不会冒泡( 也就是不会再往上层传递 )
<body><div id="div1"> <input id="input1" name="user"></div><p id="p1">上面的文本框获得焦点后会我会变成红色</p><script type="text/javascript"> var p1 = document.getElementById("p1"); var textInput = document.getElementById("input1"); textInput.onfocus = function () { p1.style.color = "red"; }; var div1 = document.getElementById("div1"); //当div中input获取焦点后，不会冒泡到上层div，所以这个函数不会执行。 div1.onfocus = function () { div1.style.backgroundColor = "#000"; }</script></body>onfocusin(获得焦点)事件 (冒泡版)
注意： 在 Firefox 浏览器中不支持 onfocusin 事件，且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusin 事件可能无法正常工作。 但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法(后面讲解)可以正常工作。
<body><div id="div1"> <input id="input1" name="user"></div><p id="p1">上面的文本框获得焦点后会我会变成红色</p><script type="text/javascript"> var p1 = document.getElementById("p1"); var textInput = document.getElementById("input1"); textInput.onfocusin = function () { p1.style.color = "red"; }; var div1 = document.getElementById("div1"); //当div中input获取焦点后，并且会冒泡到上层div，所以这个函数也会执行。 div1.onfocusin = function () { div1.style.backgroundColor = "#000"; }</script></body>5、onblur(失去焦点)事件
当元素失去焦点是触发。和onfucs对应。（不冒泡事件）
<body><div id="d"></div><p id="p1">上面的文本框获得焦点后会我会变成红色,失去焦点会变成蓝色</p><script type="text/javascript"> var p1 = document.getElementById("p1"); var d = document.getElementById("d"); d.onfocus = function () { p1.style.color = "red"; }; d.onblur = function () { p1.style.color = "green"; };</script></body>onfocusout(失去焦点)事件
onblur的(冒泡版)
注意： 在 Firefox 浏览器中不支持 onfocusout 事件，且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusout 事件可能无法正常工作。 但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法(后面讲解)可以正常工作。
<body><div id="div1"> <input id="input1" name="user"></div><p id="p1">上面的文本框获得焦点后会我会变成红色</p><script type="text/javascript"> var p1 = document.getElementById("p1"); var textInput = document.getElementById("input1"); textInput.onfocusin = function () { p1.style.color = "red"; }; var div1 = document.getElementById("div1"); //当div中input获取焦点后，并且会冒泡到上层div，所以这个函数也会执行。 div1.onfocusin = function () { div1.style.backgroundColor = "#000"; } // 给div1设置失去焦点事件 div1.onfocusout = function () { div1.style.backgroundColor = "#f0f"; }</script></body>6、onclick事件处理程序
鼠标单击事件(鼠标按下放开后触发)，一般是鼠标左键。
<body><div id="single">单击触发</div><script type="text/javascript"> var single = document.getElementById("single"); single.onclick = function () { alert("onclick事件"); };</script></body>7、ondblclick事件处理程序
一般是鼠标左键双击。双击放开后触发。
<body><div id="double">双击触发</div><script type="text/javascript"> var double = document.getElementById("double"); double.ondblclick = function () { alert("你双击了div"); }</script></body>8、onmousedown事件处理程序
当用户 按下任意鼠标按钮 时触发。按下即刻触发。
<body><div id="down">按下鼠标即刻触发</div><script type="text/javascript"> var down = document.getElementById("down"); down.onmousedown = function () { alert("你按下鼠标键"); }</script></body>9、onmouseup事件处理程序
用户释放鼠标按钮时触发，放开鼠标即刻触发。
<body><div id="up">在此元素上方放开鼠标即刻触发</div><script type="text/javascript"> var up = document.getElementById("up"); up.onmouseup = function () { alert("在这里放开鼠标键"); }</script></body>10、onmouseover事件
onmouseover当鼠标移动到一个元素的上方时触发。（冒泡事件）
<body><div id="color">当鼠标移动到我上方时，字体颜色变为红色</div><script type="text/javascript"> var color = document.getElementById("color"); //当鼠标移动到div的上方时触发 color.onmouseover = function () { color.style.color = "red"; };</script></body>11、onmouseout事件
onmouseout当鼠标从一个元素的上方移走的时候触发。（冒泡事件）
<body><div id="color">当鼠标移动到我上方时，字体颜色变为红色；当鼠标从我上方移开时，变回黑色</div><script type="text/javascript"> var color = document.getElementById("color"); //当鼠标移动到div的上方时触发 color.onmouseover = function () { color.style.color = "red"; }; //当鼠标从div的上方离开时触发 color.onmouseout = function () { color.style.color = "black"; }</script></body>注意：
onmouseover事件和onmouseout事件这两个事件均是冒泡事件：
此案例中，鼠标移入span和离开span的时候，span和div动会同时触发onmouseover和onmouseout事件，而如果鼠标只是移入 div和离开div时，只有 div会触发onmouseover和onmouseout事件。
<body><div id="color"> 当鼠标移动到我上方时，我就变色；当鼠标从我上方移开时，我就褪色 <br> <span id="span"> 我是子元素的区域 </span></div><script type="text/javascript"> var color = document.getElementById("color"); //当鼠标移动到div的上方时触发 color.onmouseover = function () { color.style.color = "red"; }; //当鼠标从div的上方离开时触发 color.onmouseout = function () { color.style.color = "black"; }; var span = document.getElementById("span"); //当鼠标移动到div的上方时触发 span.onmouseover = function () { span.style.color = "yellow"; }; //当鼠标从div的上方离开时触发 span.onmouseout = function () { span.style.color = "green"; }</script></body>12、键盘事件
三个键盘事件：
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
keyup：当用户释放键盘上的任意键时触发。
三个事件的响应处理程序：
<body ><div><input id="test"></div><script type="text/javascript"> //如果想要整个页面都响应，则将事件设置给body标签即可 var test = document.getElementById("test"); test.onkeydown = function () { console.log("你按下了任意键"); };// test.onkeypress = function () {// console.log("你按下了字符键");// }; test.onkeyup = function () { console.log('你松开了键盘'); };</script></body>获取键盘按下的具体按键：
<body id="body"><script type="text/javascript"> var body = document.getElementById("body"); body.onkeypress = function (e) { console.log("你按下了字符键：" + e.keyCode); }; body.onkeyup = function (e) { console.log('你松开了按键：' + e.keyCode); }; body.onkeydown = function (e) {// if(e.ctrlKey&&e.altKey){// alert("同时按下了ctrl和alt键");// } if (e.ctrlKey) { alert("按下了ctrl键") } else if (e.shiftKey) { alert("按下了shift键") } else if (e.altKey) { alert("按下了alt键") } };</script></body>阅读全文
0 0
- 【JavaScript学习】事件：事件类型
- 13.4 javascript事件类型
- JavaScript：事件类型
- JavaScript事件类型（一)
- JavaScript事件类型（二)
- JavaScript 事件类型
- javascript事件类型
- JavaScript事件类型（三)鼠标事件
- JavaScript之事件类型（事件）
- JavaScript笔记——事件的类型
- javascript 类型的相关注意事件1
- javaScript事件类型四（键盘与文本事件）
- JavaScript权威指南_160_第17章_事件处理_17.1-事件类型-DOM事件
- JavaScript权威指南_161_第17章_事件处理_17.1-事件类型-HTML5事件
- Javascript事件全解析——事件概述及传统事件类型
- 说说 JavaScript 事件流之事件类型（包含 DOM2、DOM3 级事件）
- 好好学一遍JavaScript 笔记(十一)——事件的类型
- 10.10 笔记-JavaScript 02 绑定事件,对象类型的转换
- 【Struts】国际化
- Object Detection -- 论文YOLO(You Only Look Once: Unified, Real-Time Object Detection)解读
- Java JVM：垃圾回收（GC 在什么时候，对什么东西，做了什么事情)
- 运维生涯-开始篇（2）
- Mybatis
- JavaScript 事件类型
- 请使用socket相关函数（非curl）实现如下功能：构造一个post请求，发送到指定httpserver的指定端口的指定请求路径（如http://www.example.com:8080/test）
- [ 网络流 树上启发式合并 主席树 ] BZOJ3681
- 【1701H1】【穆晨】【171011】连续第一天总结
- 贝叶斯分类——朴素贝叶斯算法
- JVM堆与栈
- 洛谷 1273 有线电视网
- 数据库
- 蓝桥杯——剪邮票
