JS 事件对象
一. 什么是事件对象? (黑匣子)
事件:
onclick
ondblclick
onmousedown
onmouseup
onmouseenter
onmouseleave
onmouseover
onmouseout
onmousemove
onkeydown
onkeyup
onkeypress
onload
onunload : 关闭页面时,
onfocus
onblur
onchange
onsubmit : 提交时触发,
onscroll
onresize
对象.事件 = function(){}
当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象.
二. 如何获取事件对象?
标准浏览器 : 给事件触发函数传递的第一个参数,
IE浏览器 : 全局对象的属性window.event,
兼容:
evt = evt || window.event;
var e = evt || window.event;
三. 如何获取鼠标的编码值?
event.button
标准浏览器 : 左键: 0 滚轮键 : 1 右键 : 2,
IE9以下: 1 4 2,
兼容:
function getButton(evt){
var e = evt || window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
四. 如何获取鼠标的坐标值?
1. 相对坐标值 : event.offsetX event.offsetY, 相对鼠标所在对象上的坐标值
2. 绝对坐标值(页面坐标值) : event.pageX event.pageY, 鼠标到页面的坐标值
3. 可视区坐标值 : event.clientX event.clientY, 鼠标到页面中可视区域的坐标值
4. 屏幕坐标值 : event.screenX event.screenY 鼠标到电脑屏幕的坐标值,
如何实现鼠标跟随效果?
五. 什么是事件流?什么是事件冒泡?
事件流:指事件的流向,有三个阶段:事件捕获/事件目标/事件冒泡.,
事件捕获: 由外向内,由祖先元素向子孙元素依次传递事件的过程.,
事件冒泡: 由内向外,由子孙元素向祖先元素依次传递事件的过程,
注: 浏览器默认开启的是事件冒泡,IE与欧朋浏览器不支持事件捕获.
如何阻止事件冒泡?
标准浏览器 : event.stopPropagation()
IE: event.cancelBubble = true;
兼容:
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
六. 如何获取键盘的编码值?
event.keyCode event.charCode event.which
onkeydown/onkeyup : 监听是整个键盘.
event.keyCode : 获取整个键盘的编码值,字母只获取大写的编码值.,
onkeypress : 监听除功能键外的键盘值
兼容 : event.keyCode || event.charCode || event.which
火狐:
event.keyCode : 0,
event.charCode : 大小写字母的编码值,
event.which : 大小写字母的编码值,
谷歌:
event.keyCode : 大小写字母的编码值,
event.charCode : 大小写字母的编码值,
event.which : 大小写字母的编码值,
七. 如何设置组合键(快捷键)
event.ctrlKey
event.shiftKey
event.altKey