一、什么是事件对象(黑匣子)
(一)事件:
onclick
ondblclick
(二)当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象
二、如何获取事件对象
(一)标准浏览器:给事件触发函数传递的第一个参数;
(二)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 2:return 1;
case 3:return 2;
}
}
}
四、如何获取鼠标的坐标值
(一)相对坐标值:event.offsetX event.offsetY;相对鼠标所在对象上的坐标值
(二)绝对坐标值(页面坐标值):event.pageX event.pageY;鼠标到页面的坐标值
(三)可视区坐标值:event.clientX event.clientY;鼠标到页面中可视区域的坐标值
(四)屏幕坐标值:event.screenX event.screenY;鼠标到电脑屏幕的坐标值
思考:如何实现鼠标跟随效果
五、什么是事件流,什么是事件冒泡
(一)事件流:指事件的流向,有三个阶段:事件捕获/事件目标/事件冒泡
(二)事件捕获:由外而内,由祖先元素向子孙元素一次传递事件的过程
(三)事件冒泡:由内而外,由子孙元素向祖先元素一次传递事件的过程
注:浏览器默认开启的是事件冒泡,IE与欧朋浏览器不支持事件捕获
(四)如何阻止事件冒泡
1.标准浏览器:event.stopPropagation()
2.IE:eventcancelBubble = 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