文章目录
1. JavaScript事件
事件,是指 JavaScript 捕获到用户的操作,并做出正确的响应。例如,用户单击鼠标弹出一个窗口,把鼠标移动到某个元素上产生变化。
JavaScript 事件一般与DOM元素绑定。
2. JavaScript处理事件的基本机制
- 对DOM元素绑定事件处理函数
- 监听用户的操作
- 当用户在相应的DOM元素上进行与绑定事件对应的操作时,事件处理函数做出响应
- 将处理结果更新到 HTML 文档
3. event对象:当前事件
-
event 对象是 JavaScript 中一个非常重要的对象,用来表示当前事件。
-
event 对象的属性和方法包含了当前事件的状态。
- 当前事件,是指正在发生的事件;
- 状态,是与事件有关的性质,如 引发事件的DOM元素、鼠标的状态、按下的键等等。
-
event 对象只在事件发生的过程中才有效。
获取event对象
在 W3C 规范中,event 对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式;但是对于 IE8.0 及其以下版本,event 对象必须作为 window 对象的一个属性。
◆ 在遵循 W3C 规范的浏览器中,event 对象通过事件处理函数的参数传入。
语法:
elementObject.OnXXX=function(e){
var eve = e || window.event; // 使用 || 运算取得event对象
}
这里要注意一点, || 运算的返回值不一定是 Boolean 类型,当 || 运算的两个操作数中有一个为真时,将返回该操作数本身的值。上面的代码,如果 event 随函数的参数传入,e 为真,eve=e;如果作为 window 对象的属性,window.event 为真,eve=window.event 。
4.JavaScript事件源
事件源是指发生事件的DOM节点(HTML元素)。
事件源是作为event对象的属性存在的。在W3C规范中,这个属性是 target ;但是 IE8.0 及其以下版本不支持该属性,它使用 srcElement 属性来获取事件源。
<html>
<head>
<title>获取鼠标的坐标信息</title>
</head>
<body>
<div id="demo">点击这里</div>
<script type="text/javascript">
document.getElementById("demo").function(e){
var eve = e || window.event;
var srcNode = eve.target || eve.srcElement; // 兼容所有浏览器
alert(srcNode);
}
</script>
</body>
</html>
5. JavaScript绑定事件的方法
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定
- 在JavaScript代码中绑定
- 绑定事件监听函数
5.1 在DOM元素中直接绑定
JavaScript支持在标签中直接绑定事件,语法为:
onXXX=“JavaScript Code”
- 原生函数
<input "alert('谢谢支持')" type="button" value="点击我,弹出警告框" />
- 自定义函数
<input "myAlert()" type="button" value="点击我,弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
5.2 在JavaScript代码中绑定
<input id="demo" type="button" value="点击我,显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").function(){
// this 指当前发生事件的HTML元素,这里是<div>标签
alert(this.getAttribute("type"));
}
</script>
5.3 绑定事件监听函数
为一个 id=“demo” 的按钮绑定事件,鼠标单击时弹出警告框
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
绑定事件的代码
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}
6. JavaScript 常用事件
属性 | 当以下情况发生时,出现此事件 | FF | N | IE |
---|---|---|---|---|
onabort | 图像加载被中断 | 1 | 3 | 4 |
onblur | 元素失去焦点 | 1 | 2 | 3 |
onchange | 用户改变域的内容 | 1 | 2 | 3 |
onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
onfocus | 元素获得焦点 | 1 | 2 | 3 |
onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
onmousemove | 鼠标被移动 | 1 | 6 | 3 |
onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
onreset | 重置按钮被点击 | 1 | 3 | 4 |
onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
onselect | 文本被选定 | 1 | 2 | 3 |
onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
onunload | 用户退出页面 | 1 | 2 | 3 |