事件对象——JS

最新推荐文章于 2024-02-01 09:19:56 发布
最新推荐文章于 2024-02-01 09:19:56 发布
阅读量305 收藏
点赞数
分类专栏： JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124024753
版权

文章目录

事件对象简单介绍

事件对象: 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数.
在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向……
在这里插入图片描述

验证：

 areaDiv.onmousemove = function(event){
            alert(event);
            // alert("我移动了");
        }

输出：
在这里插入图片描述

实例一：实现鼠标位置的记录

onmousemove:该事件将会在鼠标在元素中移动时被触发。

eg：
实现:记录鼠标位置：
效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #areaDiv{
            height: 200px;
            width: 500px;
            border: rosybrown 1px solid;
        }
        #showMsg{
            height: 100px;
            width: 500px;
            border: rosybrown 1px solid;
            line-height: 100px;/*值与父元素高度相等*/
            text-align: center;
        }
    </style>
    <script>
        window.onload = function(){
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");

        areaDiv.onmousemove = function(event){
            // alert(event);
            // alert("我移动了");
            /*
            clientX:获取事件的水平座标
            clientY:获取事件的垂直座标
            */
           var x = event.clientX;
           var y = event.clientY;
           showMsg.innerHTML = "x="+x+", y="+y;

        }
        }
        

    </script>
</head>
<body>
   <div id="areaDiv"></div>
   <br>
   <div id="showMsg"></div> 
    
</body>
</html>

问题：IE8及以下不支持event，IE8的event表达方式：window.event;
所以手动判断：

    <script>
        window.onload = function(){
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");

        areaDiv.onmousemove = function(){

            if(!event){
                event = window.event;
            }
           var x = event.clientX;
           var y = event.clientY;
           showMsg.innerHTML = "x="+x+", y="+y;

        }
        }
    </script>

实例二：div跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /* 开启定位才能移动 */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 直接绑定给doument
            document.onmousemove =function(event){
                event = event || window.event;
                
                // 鼠标坐标
                /*
                使用clientX，有一个问题，clientX是相对于可见窗口的，
                所以鼠标也就相对于可见窗口，而div是相对于整个网页的，
                两者相对点不一样这就导致当夜页面下移的时候出现位差，
                所以应该使用相对于网页的pageX
                */
                // var left = event.clientX;
                // var top = event.clientY;
                var left = event.pageX;
                var top = event.pageY;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";

            }

        }

    </script>
  
</head>
<body style="height: 1000px;">
    <div id = "box1"></div>
    
</body>
</html>

效果：
在这里插入图片描述
问题：
IE8不支持pageX;
解决：通过计算改变距离。

完整实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /* 开启定位才能移动 */
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            // 直接绑定给doument
            document.onmousemove =function(event){
                event = event || window.event;
                // 获取滚动条滚动距离
                // 滚动条是谁的？火狐认为是html的，chrome认为是body的
                // var scrollTop = document.body.scrollTop;
                // html：document.documentElement
                // var scrollTop = document.documentElement.scrollTop;
                var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
                var scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
            
                var left = event.clientX+scrollLeft;
                var top = event.clientY+scrollTop;
                
                //设置 box1的位置
                box1.style.left = left +"px";
                box1.style.top = top+ "px";

            }

        }

    </script>
  
</head>
<body style="height: 1000px;width: 2000px;">
    <div id = "box1"></div>
    
</body>
</html>
_洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue笔记
许久
05-19 2706
vue控制台消除两个小提示 1.安装vue开发者工具 即可消除 2.提示我们正在使用一个开发者的vue版本 开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本 添加 Vue.config.productionTip = false 即可消除 事件绑定@click传参问题 默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的 可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“
DOM事件机制
冰霜的博客
09-11 362
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
三种div点击事件
热门推荐
qq_40331957的博客
05-10 2万+
第一种方法，直接在div上添加onclick <div id="div" onclick="alert('成功')">点击</div> 第二种，DOM0级事件处理 var oDiv = document.getElementById("div"); oDiv.onclick = function(){ alert("成功"); } 第三种，DOM2级事...
javascript中的页面事件
weixin_38166686的博客
11-17 209
onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。 onb...
div动态添加点击事件
沉闷萝卜的博客
09-23 6265
div动态添加点击事件
JavaScript笔记 06：事件对象
Alice_Lee_Lee的博客
07-01 169
事件对象、事件冒泡、事件绑定、事件传播、鼠标滚轮事件、键盘事件
JS-事件
weixin_51077152的博客
09-18 306
2.1 什么是事件
精通JavaScript（文档对象模型和事件驱动——window对象）
03-07
为了能够操纵浏览器和文档，JavaScript使用分层的父对象和子对象，这就是“文档对象模型”。这些对象的组织类似一个树型结构，并表示一个Web文档的所有内容和组件。 注意：”文档对象模型”不是JavaScript语言的一...
Javascript调试之console对象——你不知道的一些小技巧
10-19
主要总结了console对象的一些有用的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
JavaScript程序设计——事件处理实验报告.docx
11-11
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
WebSocket实战之——JavaScript例子
01-27
一、详细代码案例 详细解读一个简单html5WebSocket的Js实例教程,附带完整的javascriptwebsocket实例源码，以及实例代码效果演示页面，并对本实例的...1、申请一个WebSocket对象参数是需要连接的服务器端的地址，同htt
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 4049
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
JS的事件对象详解
最新发布
qq_44741577的博客
02-01 1430
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 1万+
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
div添加一个点击事件（绑定点击事件）
l_degege的专栏
08-18 1万+
1、HTML onclick 事件属性 https://www.feiniaomy.com/post/339.html https://www.w3school.com.cn/tags/event_onclick.asp 2、JavaScript 详说事件机制之冒泡、捕获、传播、委托 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
用js给div绑定事件，实现点击切换效果的几种方式总结
Walden_tinghou的专栏
05-18 1万+
用js给div绑定事件，实现点击切换效果，总结有如下几种方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementById("titleN").value; var complaintValue = document.getElem
jsdiv鼠标移动事件
weixin_54684864的博客
03-02 1661
jsdiv鼠标移动事件 想法:鼠标移入区域 div跟着鼠标位置移入鼠标移出时沿着鼠标移出方向移出 难点: 在于如何判断进入和移出事件 如何记录移入移出位置 这里用了π.pI用弧度来求得鼠标的位置 效果： 可以随着鼠标移进移出并且记录位置 先确定移动的div 注意: getBoundingClientRect没有参数 Math.PI是圆周率π 写当前移动的移入移出事件 Mouseenter （鼠标移入目标时运行的方法） Mouseleave （当鼠标离开目标时运行的方法） 先定义四个变量 定义Bg等于这个di
JavaScript事件对象
m0_59745705的博客
08-08 328
js事件对象啊基础知识
js事件高级-事件对象
phoebemeng的博客
07-14 222
什么是事件对象？ e.target和this的区别 如何阻止事件冒泡
javascript知识训练——字符串对象
06-28
### 回答1： 字符串对象是JavaScript中的一种数据类型，用于表示文本数据。字符串对象可以包含任何字符，包括字母、数字、符号和空格等。在JavaScript中，字符串对象是不可变的，也就是说一旦创建就不能修改。但是可以通过一些方法来操作字符串对象，如拼接、截取、替换等。常见的字符串方法有concat()、slice()、replace()等。掌握字符串对象的使用可以帮助我们更好地处理文本数据。 ### 回答2： JavaScript字符串对象是一个在JavaScript中非常重要的事物。JavaScript字符串对象可以帮助我们在JavaScript编程中进行文本操作。通过了解字符串对象，可以使我们更有效地处理字符串数据，并让我们的代码更加强大。 JavaScript中的字符串对象具有很多方法和属性，可以帮助我们对字符串进行各种操作。以下是一些常用的字符串对象方法： 1. length属性：返回字符串的长度。 2. charAt()方法：返回指定索引位置的字符。 3. concat()方法：连接两个或多个字符串。 4. slice()方法：提取字符串的一部分，并返回一个新字符串。 5. substr()方法：从指定位置开始提取长度为指定的字符。 6. replace()方法：替换字符串中的指定文本。 7. split()方法：将字符串转换为数组。 8. toLowerCase()方法：将字符串转换为小写。 9. toUpperCase()方法：将字符串转换为大写。 在JavaScript中处理字符串非常重要，因为在处理表单、验证用户输入等方面都需要使用到字符串。字符串对象也是最常用的JavaScript对象之一，因此熟悉JavaScript字符串对象将有助于提高程序的效率和简洁性。 需要特别注意字符串是不可修改的，一旦创建了一个字符串对象，就无法修改它的值。所以，任何字符串的修改操作都将返回一个新的字符串。 在编写程序时，应根据需要选择适当的字符串操作方法和属性。例如，在向用户显示错误消息时，可能需要使用charAt()方法或slice()方法来提取并显示错误消息中的第一个字符或前几个字符。或者，在对用户输入进行验证时，可以使用indexOf()方法或search()方法来检查输入的字符串中是否包含特定的字符或字符串。 总之，JavaScript字符串对象是处理JavaScript编程中文本数据的重要工具。通过了解字符串对象的各种方法和属性，可以更加有效和灵活的处理和操纵字符串数据。 ### 回答3： JavaScript中的字符串对象是一个字符串值的表示。它提供了对字符串值的访问和操作。JavaScript字符串是Unicode字符串，因此它们可以包含任何Unicode字符（包括多字节字符）。 字符串对象的主要方法有： 1. charAt()方法-返回指定索引的字符。该索引是基于零的。例如： var str = "hello world"; console.log(str.charAt(1)); //输出e 2. concat()方法-将一个或多个字符串连接到原始字符串，并返回新字符串。例如： var str1 = "hello "; var str2 = "world"; var newStr = str1.concat(str2); console.log(newStr); //输出hello world 3. indexOf()方法-返回第一个匹配的字符索引。如果没有找到匹配项，则返回-1。例如： var str = "hello world"; console.log(str.indexOf("world")); //输出6 4. lastIndexOf()方法-返回最后一个匹配的字符索引。如果没有找到匹配项，则返回-1。例如： var str = "hello world"; console.log(str.lastIndexOf("l")); //输出9 5. replace()方法-替换字符串中的字符。例如： var str = "hello world"; console.log(str.replace("world", "everyone")); //输出hello everyone 6. slice()方法-从字符串中提取指定的字符。例如： var str = "hello world"; console.log(str.slice(0, 5)); //输出hello 7. split()方法-将字符串拆分为子字符串，并返回一个数组。例如： var str = "hello world"; console.log(str.split(" ")); //输出["hello", "world"] 字符串对象是JavaScript中最常用的对象之一。它提供了许多方法，可以让您对字符串执行各种操作，包括搜索、提取和更改字符。熟练掌握这些方法，可以使您在JavaScript中更有效地处理字符串值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值