JS事件对象初识

最新推荐文章于 2024-07-22 15:13:59 发布

chihuomiao

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量145

点赞数

分类专栏：课后习题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/chihuomiao/article/details/124848042

版权

课后习题专栏收录该内容

48 篇文章 0 订阅

订阅专栏

window.onload的用处就是预加载Script语句，有了它可以把script放在前面

-------------------------------------------------

事件对象

目测这是一个大的夸张的知识点

今儿只浅谈一下简单的用法

事件对象跟原型对象一样是自动生成的，在事件绑定完成的时候

-----------------------------

鼠标事件

MouseEvent.下列方法
clientX和clientY 相对于浏览器可视窗口左上角原点

它们提供了事件发生时应用客户端区域的水平和垂直坐标（与页面坐标不同）for exsample，不论页面是否水平滚动，只要你点击应用客户端区域左上角它都是0
screenX和screenY相对于电脑屏幕左上角

它提供鼠标在全局（屏幕）中的水平坐标（偏移量）。
PageX和pageY相对于页面文档流左上角原点

它是由鼠标事件接口返回的相对于整个文档的（水平和垂直）坐标以像素为单位的只读属性

这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。
offsetX和offsetY相对于触发事件的元素

鼠标事件接口的只读属性offset规定了事件对象与目标节点的内填充边（padding edge）在 X 轴和Y 轴方向上的偏移量。

鼠标跟随

阻止事件

----------------------------------
事件绑定有两种方式
1传统的绑定方式 .on+some action
2监听绑定事件addEventListerner('事件名'，事件处理函数)

这个事件名是监听事件类型的字符串

楼上的事件类型触发会接受到一个通知对象，事件处理函数只是一种，这个位置也可以是实现了事件监听接口的对象，后面还可以写两个值是可选的但是今天不讲，以后补充说明

使用传统绑定事件的时候，上图只会输出第二个文字，第一个语句中的文字会被直接覆盖根本看不着

但是监听绑定就好使一点儿，它可以同时绑定多个事件并且可以同时运行

——————————————————————————————————————————————————————————————————————————————————————

小练习，在固定范围内拖拽图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        img {
            width: 100px;
            height: 133.32px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./keqing3.jpg" alt="" id="pic">
    </div>
    <script>
        //获取元素节点
        let pic = document.getElementById('pic')
        //绑定按下事件
        pic.onmousedown = function (miao1) {
            // 按下事件之后无法执行移动事件，清除默认
            miao1.preventDefault()
            //绑定移动事件
            pic.onmousemove = function (miao2) {
                //声明坐标 图片位置 = 移动后的视口位置（miao2.clientX、maio2.clientY）- 偏移量（miao1.offsetX、miao1.offsetY）
                let picX = miao2.clientX - miao1.offsetX
                let picY = miao2.clientY - miao1.offsetY
                // 判断
                // 左不可超出
                if (picX < 0) {
                    picX = 0
                }
                // 右不可超出
                if (picX > 400) {
                    picX = 400
                }
                // 上不可超出
                if (picY < 0) {
                    picY = 0
                }
                // 下不可超出
                if (picY > 366.68) {
                    picY = 366.68
                }
                pic.style.top = picY + 'px'
                pic.style.left = picX + 'px'
            }
        }
        //不然会一直跟着跑 
        pic.onmouseup = function () {
            pic.onmousemove = null
        }
    </script>
</body>
</html>

直接复制肯定没效果，因为我的图你没有呀。

哦对了，虽然绑定事件会自动生成事件对象，就是那个括号里的形参，我们用这个形参调用事件对象的方法，这个形参就像我上面用的miao一样，可以随便设置，但是！不推荐！俺们潜规则是这个事件对象的形参用e或者event 或者ev，这样方便其他人阅读……

chihuomiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件对象初识

window.onload的用处就是预加载Script语句，有了它可以把script放在前面事件对象跟原型对象一样是自动生成的，在事件绑定完成的时候MouseEvent.下列方法clientX和clientY 相对于浏览器可视窗口左上角原点它们提供了事件发生时应用客户端区域的水平和垂直坐标（与页面坐标不同）for exsample，不论页面是否水平滚动，只要你点击应用客户端区域左上角它都是0screenX和screenY相对于电脑屏幕左上角它提供鼠标在全局（屏幕）中的水平坐标（偏移量）。
复制链接

扫一扫