event包含了发生事件的所有信息内容,不如:发生事件类型,发生事件的元素,键盘按下状态等等
事件对象的创建,当事件发生时,游浏览器帮我们创建的,并通过参数的形式传递给事件处理程序的
事件获取方式
//IE window.event; //非IE arguments[0]; //事件处理程序的参数,第一个参数默认为event事件对象
事件属性
鼠标事件
鼠标事件 | 事件属性 | 鼠标事件 | 事件属性 | 鼠标事件 | 事件属性 |
---|---|---|---|---|---|
鼠标单击 | onclick | 鼠标双击 | ondblclick | 鼠标移入 | onmouseover |
鼠标移出 | onmouseout | 鼠标进入 | onmouseenter | 鼠标离开 | onmouseleave |
鼠标按下 | onmousedown | 鼠标释放 | onmouseup | 鼠标移动 | onmousemove |
鼠标移入与移出:
元素的变动则执行,
从外部元素移入内部元素会触发内部移入与外部移入、移出。从内部元素移入外部元素会触发外部移入与内部移出。
鼠标进入与离开:
只针对元素包裹区域
从外部元素进入内部元素只会触发内部移入。从内部元素进入外部元素会触发内部离开。
鼠标点击
鼠标点击 = 鼠标按下 + 鼠标释放
鼠标移动
idvObj.onmousemove = function(event){ var eventObj = window.event||event[0]; var cx = eventObj.clientX; var cy = eventObj.clientY; //获得客户区域X、Y坐标 var sx = eventObj.screenX; var sy = eventObj.screenY; //获得鼠标相对屏幕的x和y 坐标 }
键盘事件
键盘事件 | 键盘属性 | 键盘事件 | 键盘属性 | 键盘事件 | 键盘属性 |
---|---|---|---|---|---|
键盘按下 | onkeydown | 键盘按下 | onkeypress | 键盘释放 | onkeyup |
onkeydown:所有件按下有效
onkeypress:特殊键(无键盘码的键)按下无效,只有字母字符键有效
事件对象的 altkey shiftkey ctrlkey
// 事件对象的 altkey shiftkey ctrlkey document.onkeydown=function(event){ let key_code = event.keyCode; //先获得键盘码 (可以知道你按下了键盘的那个键) //判断是否按钮了shift键 if(e.shiftKey){ console.log("你按下了shift键"); } //是否按钮了ctrl键 if(e.ctrlKey){ console.log("你按下了ctrl键"); } //是否按钮了alt键 if(e.altKey){ console.log("你按下了alt键"); } }