javascript_事件-优快云博客

本文详细介绍了JavaScript中的各种事件类型，包括鼠标事件、键盘事件、HTML事件等，并解释了如何为HTML元素绑定事件，以及如何处理事件对象。此外还讨论了事件冒泡及取消冒泡的方法。

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

在javascript脚本文件中为标签添加事件，将事件与HTML分离

var data= document.getElementById("...");
data.onclick = box;

赋值时，只要加上函数名就可以了，如果加上括号，会自动执行。

鼠标事件

onclick 单击
ondblclick 双击
onmousedown 按下还没有释放
onmouseup 释放鼠标时
onmouseover 鼠标经过区域
onmouseout 鼠标离开时
onmousemove 鼠标移动时执行

键盘事件

onkeydown 按下任意键时触发，按下不放会重复触发
onkeypress 按下字符键时触发
onkeyup 松开任意键时触发

HTML事件

onload 加载完成后执行
onunload 页面卸载的时候执行
onselect 选定文本框中文字并松开鼠标时执行
onchange 当文本框中文字改变，并失去焦点时
onfocus 获得焦点，
onblur 失去焦点时
onsubmit 表单（必须在表单form标签上触发）
onreset 重置按钮
onresize 窗口大小变化时

window.resize = function(){};

onscroll 当滚动条滚动时执行

window.onscroll

事件中的this表示绑定的对象，全局范围就是window

当不传参时，arguments[0] 表示event事件对象，浏览器默认传递一个事件对象

onclick= function(event){
        alert(event)// IE中是winodw.event
}

鼠标

onclick只用于左键，onmousedown 和 onmouseup支持所有键
event的button属性
0 左键
1 中键
2 右键

IE：
1 左键
2 右键
4 中键

clientX / clientY

可视区的横纵坐标（不包括被滚动条隐藏的部分）

scrennX / screenY

在屏幕上的坐标

event.screenX

scrollLeft / scrollTop

获取被滚动条隐藏的部分的高度

document.body.scrollTop

shiftKey /ctrlKey / altKey

判断是否按下shift/ctrl/alt键

if(event.shiftKey)

获取键盘返回的值

键码

键盘上的任意键，返回ASCII码，字母不区分大小写(全部转换为大写)
keyCode 返回键码
String.fromCharCode(ASCII码) 将编码转换为字符

    document.onkeydown = function(){
        alert("键码"+event.keyCode+String.fromCharCode(event.keyCode));
    }

字符编码

keypress 事件
charCode 区分大小写返回字符编码

    document.onkeydown = function(event){
        alert("字符编码："+event.keyCode+String.fromCharCode(event.charCode));
    }

target

onclick事件中，event.target / event.srcElement可以获得与之绑定的标签对象

cancelBubble / setPropagation

取消冒泡