【05】JavaScript事件

最新推荐文章于 2024-05-30 21:42:04 发布

原创最新推荐文章于 2024-05-30 21:42:04 发布 · 410 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript事件的概念、处理机制及事件对象的使用方法。同时，文章还探讨了不同类型的事件绑定方式，包括直接在DOM元素上绑定、通过JavaScript代码绑定以及绑定事件监听函数等。此外，还列举了大量常见事件及其触发条件。

文章目录

1. JavaScript事件
2. JavaScript处理事件的基本机制
3. event对象：当前事件
- 获取event对象
4.JavaScript事件源
5. JavaScript绑定事件的方法
6. JavaScript 常用事件

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