JavaScript事件（一）基础-优快云博客

本文介绍了JavaScript事件的基础知识，包括事件属性、文档加载、事件对象以及键盘事件的相关属性。通过示例展示了如何利用事件监听鼠标的移动，并实现了一个移动的爱心效果。强调了在处理事件时的兼容性问题，特别是针对IE8的处理。此外，还列举了常见的DOM事件，如onclick、onmouseover等，帮助读者理解JavaScript与HTML的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript事件（一）基础

简介：

-事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

-JavaScript与HTML之间的交互是通过事件实现的。对于Web应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下、弹起事件等。

事件属性

使用事件属性向html元素分配事件。

例：向button元素分配onclick事件

文档加载

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行的时候就加载一行，如果将script标签写在上面,在执行代码时，页面还没有加载

从性能方面考虑，写在下边更好。将js代码写在页面下面就是为了保证执行代码的时候页面已经加载完毕。

注意：window.onload在页面上只能出现一次。后面的代码会覆盖前面的代码

window.onload=function(){

var btn=document.getElementById("btn");

console.log(typeof btn);

btn.onclick=function(){

alert("这是一个button按钮");

};

}

事件对象（Event）

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个键被按下，鼠标滚轮滚动的方向。

在IE8中，响应函数被触发时，浏览器不会传递事件对象

在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存

键盘事件：

altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按

属性列表：

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。