2020-09-07---event

最新推荐文章于 2023-11-23 16:37:08 发布

易de

最新推荐文章于 2023-11-23 16:37:08 发布

阅读量188

点赞数

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/108454197

版权

H5 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

52 篇文章 0 订阅

订阅专栏

一、什么是事件对象？（黑匣子，行车记录仪，监控）

当绑定事件的对象在触发事件时，发生信息保存在一个地方，这个地方叫做事件对象。

二、如何获取事件对象？

标准浏览器：事件处理程序接收的第一个形参内容
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;

易de

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-07---event

event一、什么是事件对象？（黑匣子，行车记录仪，监控）二、如何获取事件对象？三、事件的对象的应用1.如何获取鼠标的编码值（1）event.button（2）which IE9以下不支持2. 如何获取鼠标的坐标值（1）鼠标的相对坐标值(相对鼠标所在对象的坐标值)（2）鼠标的绝对坐标值(相对于body（左上角）的坐标值)（3）鼠标的可视区坐标值（4）鼠标的屏幕坐标值3.如何获取键盘的编码值（1）onKeydown/onKeyup（2）onkeypress4.如何实现组合（快捷）键5.阻止事件冒泡的兼容案例模
复制链接

扫一扫