事件的类型：
鼠标事件：
click 单击鼠标左键时触发
dblclick 双击鼠标左键时触发
mousedown 单击任意一个鼠标按键时触发
mouseup 松开鼠标任意一个按键时触发
mouseover 指针指针到另一个元素上时触发
mouseout 鼠标指针在某个元素上，移出该元素边界时触发
mousemove 鼠标指针在某个元素上移动时持续触发
<html>
<head>
<title>鼠标事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event) oEvent = window.event; //处理兼容性，获得事件对象
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + "<br>"; //输出事件名称
}
window.onload = function(){
var oImg = document.getElementsByTagName("img")[0];
oImg.onmousedown = handle; //将鼠标事件除了mousemove外都监听
oImg.onmouseup = handle;
oImg.onmouseover = handle;
oImg.onmouseout = handle;
oImg.onclick = handle;
oImg.ondblclick = handle;
}
</script>
</head>
<body>
<img src="03.jpg" border="0" style="float:left; padding:0px 8px 0px 0px;">
<div id="display"></div>
</body>
</html>以上代码将除了mousemove外的所有鼠标事件都予以监听,这样便可以很清楚地看到鼠标在图片上的动作所触发的一系列事件。
例如单击鼠标左键会先触发mousedown，然后是mouseup，最后才是常用的click事件；
而如果是双击鼠标左键，两类浏览器又再次发生了区别，标准的DOM浏览器会按照mousedown->mouseup->click->mousedown->mouseup->click->dblcilick
的顺序触发,即两次单击合成一次双击。
而双击事件在IE8浏览器中的触发顺序为mousedown->mouseup->click->mouseup->dblclick,即一次单击紧接着mouseup,然后判断为双击;
注意:对应旧版的浏览器,对于鼠标事件的触发,如果编程时需要涉及双击事件,应当尽量避免使用它的触发过程,原因就在于两类浏览器的不同;
IE9以上浏览器已经与标准的DOM结果一致;
鼠标button属性
button属性及其不同浏览器中的键值
button IE中的按键 Firefox中的按键
0 未按下案件 左键
1 左键 中键(滑轮)
2 右键 右键
3 同时按下左、右键 不支持组合键，未按下任何键时button值为undefined
4 中键(滑轮)
5 同时按下左、中键
6 同时按下右、中键
7 同时按下左、中、右键
输出鼠标事件button属性的值
<html>
<head>
<title>button属性</title>
<script language="javascript">
function TestClick(oEvent){
var oDiv = document.getElementById("display");
if(window.event)
oEvent = window.event;
oDiv.innerHTML += oEvent.button; //输出button的值
}
document.onmousedown = TestClick;
window.onload = TestClick; //测试未按下任何键
/*
以上语句也可写成：
window.onload = function(){
document.onmousedown = TestClick;
}
*/
</script>
</head>
<body>
<div id="display"></div>
</body>
</html>which属性判断鼠标键
<button id="btn"><mark>鼠标事件</mark>>是哪一个键</button>
<script type="text/javascript">
//which->判断按下的那个鼠标键 左1 中2 右3
//mouse相关的都是鼠标事件
btn.onmousedown = function(e){
//事件对象兼容处理
var ev = e || window.event;
switch (ev.which){
case 1:
console.log("你按下的是左键");
break;
case 2:
console.log("你按下的是滚轮键");
break;
case 3:
console.log("你按下的是右键");
break;
case 4:
console.log("你按下的是左侧键上");
break;
case 5:
console.log("你按下的是左侧键下");
break;
default:
console.log("你的键我没有");
break;
}
}
</script>键盘事件：
onkeydown 某个键盘按键被按下，一直按住某键则会持续触发
onkeypress 某个键盘按键被按下并松开,忽略shift alt ctrl等键
onkeyup 某个键盘按键被松开。
实例：控制键盘事件
<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event) oEvent = window.event; //处理兼容性，获得事件对象
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + " "; //输出事件名称
}
window.onload = function(){
var oTextArea = document.getElementsByTagName("textarea")[0];
oTextArea.onkeydown = handle; //监听所有键盘事件
oTextArea.onkeyup = handle;
oTextArea.onkeypress = handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>上述代码触发的顺序为keydown->keypress->keyup,IE7和Firefox中运行效果是相同的;
对于键盘事件而言,最重要的并不是事件的名称,而是所按的是什么键,由于IE浏览器没有charCode属性,而keyCode只有在keydown、keyup事件发生时才与
标准的DOM的keyCode相同，在keypress事件中等同于charCode，因此常采用如下方法。
if(window.event){
oEvent = window.event; //处理兼容性，获得事件对象
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
}注意:上述代码采用keypress事件,并做出了兼容性写法来确保浏览器的兼容性;在keypress事件下charCode和keyCode的Unicode值是相同的;
而且也能区分大小写(A和a)(此代码在onkeypress事件下,使用charCode属性能兼容所有的浏览器)
backspace 8
空格 32
回车 13
左上右下 37 38 39 40
实例：键盘事件的相关属性
<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event){
oEvent = window.event; //处理兼容性，获得事件对象
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
}
var oDiv = document.getElementById("display");
//输出测试
oDiv.innerHTML += oEvent.type + ": charCode:" + oEvent.charCode + " keyCode:" + oEvent.keyCode + "<br>";
}
window.onload = function(){
var oTextArea = document.getElementsByTagName("textarea")[0];
oTextArea.onkeypress = handle; //采用onkeypress区分按键的Unicode,则charCode和keyCode值是相同的，又能够区分大小写(a和A)
oTextArea.onkeydown = handle; // charCode和keyCode值就不相同,而keycode兼容多种浏览器,但不能区分大小写a和A
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>注意:上述代码采用keypress事件,并做出了兼容性写法来确保浏览器的兼容性;在keypress事件下charCode和keyCode的Unicode值是相同的;
而且也能区分大小写(A和a)(此代码在onkeypress事件下,使用charCode属性能兼容所有的浏览器)
keycode和charcode比较,keycode虽然能兼容多种浏览器,但不能区分大小写(a和A)
实例: 打印机事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字打印</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
div{
width: 400px;
height: 200px;
text-align: left;
margin: 20px auto;
border: 1px solid red;
}
input{
width: 400px;
height: 36px;
outline: none;
padding-left: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<input type="text" placeholder="文字待输入区域···" />
<script type="text/javascript">
var timer = null;
var index = 0;
var oInput = document.getElementsByTagName("input")[0];
var oDiv = document.getElementsByTagName("div")[0];
oInput.onkeydown = function(ev) {
var eEvent = ev || window.event;
if (eEvent.keyCode == 13) { //回车键
var txt = oInput.value;
timer = setInterval(function() {
if (txt.length == index - 1) {
clearInterval(timer);
} else {
oDiv.innerText = txt.substring(0, index++) + '_';
txt.value = ""
}
}, 400)
}
};
</script>
</body>
</html>HTML事件：
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
onload 一张页面或一幅图像完成加载。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
载入事件load是最常用的事件之一,因为在页面载入之前,DOM的框架还没有搭建完毕,因此任何相关操作都不能发生。
给window对象分配load、unload事件等同于<body>标记的onload、onunload方法，即：
<script language="javascript">
window.onload=function(){
alert("Page Loaded");
}
</script>等同于:<body onload="alert('Page Loaded');">
a标签点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<a href="javascript:;">点我呀</a>-->
<!--<a href="javascript: return;">点我呀</a>-->
<a href="javascript: void(0);">点我呀</a>
<script type="text/javascript">
var a = document.getElementsByTagName("a")[0];
a.onclick = function(){
console.log("hello world");
}
</script>
</body>
</html>你会发现我们执行的语句hello world会在控制台一闪而过, 因为a本身具有跳转功能, 所以你会看到刚刚的效果。
①<a href="javascript:;">点我呀</a>
②<a href="javascript: void(0);">点我呀</a>
③<a href="javascript: return;">点我呀</a>