绑定事件中的event

最新推荐文章于 2023-03-16 15:57:10 发布

JayScofield

最新推荐文章于 2023-03-16 15:57:10 发布

阅读量493

点赞数 1

分类专栏： JS 文章标签： js event 绑定事件

本文链接：https://blog.csdn.net/sinat_36768524/article/details/59652614

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是event？

一句话概括

事件对象。相当于一个容器。每次事件触发的时候，将鼠标点的位置、鼠标按钮的状态、键盘按键的状态、发生的元素的信息存储在event这个容器中。

我们看一个例子

我们设计一个div
这里写图片描述

点击div，遍历出event（ie和Chrome）

oDiv.onclick=function(){
    for(var attr in event){
        console.log(attr + '=' + event[attr]);
    }
};

这里写图片描述

这里包含了鼠标点的位置、鼠标按钮的状态、键盘按键的状态、发生的元素的信息，例如screenX、screenY等。

我们刷新分别对div三个不同的位置进行点击，注意观察screenX、screenY的值

左上角点击
这里写图片描述
中间点击

右下角点击

可以发现，随着每次鼠标的点击，event里面screenX,screenY会改变。

所以event对象里面的值，是在事件每次触发的时候，改变的。

绑定事件有：

这里写图片描述

event中重要属性

screenX、screenY

这里写图片描述
事件发生的时候，鼠标指针相对于显示屏左上角的位置

clientX/clientY
这里写图片描述
事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；
如果有有滚动条，一般就需要配合
document.body.scrollLeft和 document.body.scrollTop进行使用了

offsetX,offsetY/layerX,layerY
事件发生的时候，鼠标相对于源元素左上角的位置；

x,y/pageX,pageY
检索相对于父要素鼠标水平坐标的整数；

keyCode（根据按键值进行操作）
返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

fromElement,toElement
前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

cancelBubble
一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

returnValue
一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

attachEvent(),detachEvent()/addEventListener(),removeEventListener
为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

event小应用

div随着鼠标移动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>event小应用</title>
<style>
#div1 {width: 100px; height:100px; background: #ccc; position: absolute;}
</style>
<script>
window.onload = function() {
    var oDiv = document.getElementById('div1');
    document.onmousemove = function(ev) {
        var ev = ev || event;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        oDiv.style.left = ev.clientX + 'px';
        oDiv.style.top = ev.clientY + scrollTop + 'px';
    }

}
</script>
</head>

<body style="height: 2000px;">
    <div id="div1"></div>
</body>
</html>

JayScofield

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绑定事件中的event

什么是event？一句话概括事件对象。相当于一个容器。每次事件触发的时候，将鼠标点的位置、鼠标按钮的状态、键盘按键的状态、发生的元素的信息存储在event这个容器中。我们看一个例子我们设计一个div 点击div，遍历出event（ie和Chrome）oDiv.onclick=function(){ for(var attr in event){ console.log(at
复制链接

扫一扫