event
一、什么是事件对象?(黑匣子,行车记录仪,监控)
当绑定事件的对象在触发事件时,发生信息保存在一个地方,这个地方叫做事件对象。
二、如何获取事件对象?
- 标准浏览器:事件处理程序接收的第一个形参内容
- IE:window.event
兼容:event = event || window.event;
三、事件的对象的应用
1.如何获取鼠标的编码值
(1)event.button
左键 | 滚轮 | 右键 | |
---|---|---|---|
标准 | 0 | 1 | 2 |
IE | 1 | 4 | 2 |
获取鼠标编码值的兼容
function getMouseCode(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;
}
}
}
(2)which IE9以下不支持
左:1 ;滚轮 :4 ;右 : 2;
2. 如何获取鼠标的坐标值
(1)鼠标的相对坐标值(相对鼠标所在对象的坐标值)
event.offsetX
event.offsetY
(2)鼠标的绝对坐标值(相对于body(左上角)的坐标值)
IE9以下不支持
event.pageX
event.pageY
兼容
event.clientX + Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + Math.floor(document.documentElement.scrollTop || document.body.scrollTop)
(3)鼠标的可视区坐标值
event.clientX
event.clientY
(4)鼠标的屏幕坐标值
event.screenX
event.screenY
3.如何获取键盘的编码值
(1)onKeydown/onKeyup
event.keyCode : 监听整个键盘,如果是字母区,只获取大写的编码值
(2)onkeypress
var code = event.keyCode || event.charCode || event.which
4.如何实现组合(快捷)键
event.ctrlKey
event.shiftKey
event.altKey
5.阻止事件冒泡的兼容
- 标准浏览器 event.stopPropagation()
- IE event.cancelBubble = true;
兼容
e.stopPropagation ? e.stopPropagation() : e.cancelBuble = true;
案例
模仿画图板,在页面左下角输出鼠标的坐标值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07仿画图</title>
<style>
#box{
position: fixed;
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var o_box = document.getElementById('box');
document.onmousemove = function(evt){
var e = evt || window.event;
o_box.innerText = e.clientX + ',' + e.clientY;
}
</script>
</body>
</html>
鼠标跟随
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08鼠标跟随</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var o_box = document.getElementById('box');
document.onmousemove = function(evt){
var e = evt || window.event;
o_box.style.left = e.pageX - o_box.offsetWidth/2 + 'px';
o_box.style.top = e.pageY - o_box.offsetHeight/2 + 'px';
}
</script>
</body>
</html>
兼容
//1滚动条距离顶端的距离
var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
//2滚动条距左端的距离
var scroll_left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);
//3.byClassName的兼容
function byClassName(obj,className){
if(obj.getElementsByClassName){ //支持
return obj.getElementsByClassName(className);
}else{
//获取全部
var eles = obj.getElementsByTagName('*');
var arr = [];
for(var i = 0,len = eles.length;i < len;i ++){
if(eles[i].className === className){
arr.push(eles[i]);
}
}
return arr;
}
}
//4. 获取非行内样式
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//5. 获取事件对象的兼容
function getEvent(){
return arguments[0] || window.event;
}
//6. //获取鼠标编码值的兼容
function getMouseCode(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;
}
}
}
//7. 获取键盘编码值的兼容
event.keyCode || event.charCode || event.which
//8. 阻止事件冒泡的兼容
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;