Javascript-dom总结(event相关)

最新推荐文章于 2025-06-16 17:44:30 发布

原创最新推荐文章于 2025-06-16 17:44:30 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

1. 判断是否按下了特殊键

function t() {
            //判断是否按下了Ctrl
            if (window.event.ctrlKey) {
                alert("按下了ctrl");
            }
        }

类似的还有altKey、shiftKey。

2. 获取鼠标的位置

a. 鼠标在网页中的位置

function getLocation() {
            //鼠标在网页中的位置
            var x = window.event.clientX;
            var y = window.event.clientY;
            alert("当前鼠标在客户区位置" + x + "," + y);
        }

b.鼠标在屏幕中的位置

 function getLocation1() {
            //鼠标在屏幕上的位置
            var x = window.event.screenX;
            var y = window.event.screenY;
            alert("当前鼠标在屏幕位置" + x + "," + y);
        }

c.鼠标在事件源上的位置

function getLocation2() {
            //鼠标在事件源上的位置 例如：点击按钮，则获得鼠标在按钮上的坐标
            var x = window.event.offsetX;
            var y = window.event.offsetY;
            alert("当前鼠标在事件源位置" + x + "," + y);
        }

3.阻止默认行为

a.阻止超级链接的跳转

<a href="http://www.baidu.com" onclick="window.event.returnValue=false">不让去百度</a>

b.页面关闭提醒

<body onbeforeunload="window.event.returnValue='帖子尚未提交'">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

→→→→

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

高德地图轨迹回放，消息框内展示车辆速度且随车辆移动-升级支持调整速度、回放进度

博客

05-09

1万+

使用高德地图回放车辆GPS轨迹，并添加速度和回放进度条，并支持调整，效果如下：新增的功能：在基础版本，有如下升级速度条：可以拖动以调整车辆回放速度，且从当前位置继续回放进度条：进度条表示车辆已回放的百分比，且拖动进度条车辆定位到相应的位置并继续回放 ###思路分析高德和marker回放相关的API //主要靠他回放 moveAlong(path:Array,speed:Number,f:Function,circlable:Boolean) //点移动到另一个位置，移动进度条车辆跟随移动

高德地图轨迹回放，消息框内展示车辆速度且随车辆移动

博客

05-09

3200

直接上代码和效果图，代码中有步骤注释，很简单需要替换您自己的高德API KEY。 <html> <head> <script src="https://webapi.amap.com/maps?v=1.3&key=你的KEY&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Drivin

参与评论您还未登录，请先登录后发表或查看评论

addEventListener处理函数添加参数

热门推荐

源辰_付鹏程

08-15

1万+

事情的起因是因为被一个学生问到的，代码如下 var aDiv=oDiv.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++){ aDiv[i].addEventListener("mouseover",change(),false); } 问我为什么mouseover事件都没有触发，为什么直接执行了函数。我当时也蒙了一

javaScript - DOM - Event 对象

weixin_46022982的博客

05-31

403

2 Event 对象 2.1 获取 Event 对象 1. 如果是第一种方式监听事件使用关键字 event 2. 如果是第二种方式或第三种方式监听事件，回调函数自动接收参数，写个形参 2.2 鼠标事件对象 MouseEvent 的属性和方法 offsetX / offsetY 获取鼠标在目标元素上的位置 pageX / pageY 获取鼠标在页面上的位置 clientX / clientY 获取鼠标在视口上的位置 screenX / screenY 获取鼠标在屏幕上的位置 button

JavaScript-DOM-事件对象event

十二的博客

04-28

1163

JavaScript-DOM-事件对象event

JavaScript -- DOM事件总结

Qlz的博客

12-08

829

在DOM中存在着多种不同类型的事件对象，多种事件对象有一个共同的祖先 Event event.target 触发事件的对象 event.currentTarget 绑定事件的对象（同this） event.stopPropagation() 停止事件的传导 event.preventDefault() 取消默认行为事件的冒泡（bubble）事件的冒泡就是指事件的向上传导当元素上的某个事件被触发后，其祖先元素上的相同事件也会同时被触发冒泡的存在大大的简化了代码的编写，但是在一些场景下我们并不希望冒泡存

JavaScript-DOM学习归纳总结

sen_03的博客

10-22

394

JavaScript-DOM学习归纳总结现在所说的JavaScript包含了三个部分 ECMAScript：js的语法规范 DOM：操作网页的功能 BOM：操作浏览器的功能 DOM（Document Object Model文档对象模型）： 1.概念 DOM 是 W3C（万维网联盟）的标准。（1）W3C DOM 标准被分为 3 个不同的部分： ① 核心 DOM - 针对任何结构化文档的标准模型 ② XML DOM - 针对 XML 文档的标准模型 ③ HTML DOM - 针对 HTML 文档的标准

JavaScript HTML DOM EventListener

最新发布

likuoelie的博客

06-16

1019

EventListener 是 JavaScript 中用于监听和处理 HTML DOM 事件的方法。它可以让网页响应用户的操作，如点击按钮或页面加载完成。通过方法，可以为元素添加事件处理程序，当事件发生时执行指定的函数。JavaScript HTML DOM EventListener 是创建交互式网页的关键工具，通过方法可以灵活地响应用户操作和系统事件。它支持事件冒泡和捕获，适用于现代浏览器，但在旧版 IE 中需要特殊处理。掌握 EventListener 的使用可以显著提升网页的动态性和用户体验。

JavaScript-事件（Event）

AhriProGramming的博客

04-17

671

存在大量子元素时，可以通过给其父级元素设置事件监听器，当点击一个子元素时，事件会通过事件冒泡到其父级元素上，此时父级元素上的事件监听器触发，通过事件对象的属性执行对应的代码块。事件时程序系统中正在发生的事情，系统会产生（触发）某种信号并提供一种机制，当事件发生时可以自动采取某种行动（对应的代码段）。当一个元素上的事件被触发后，这个事件会沿着DOM树（即从根节点开始）向下逐级传播，直到到达目标元素（实际触发事件的元素）为止。当一个元素上的事件被触发后，这个事件会沿着DOM树向上逐级传播，直到到达根元素为止。

谈谈《 JavaScript - DOM编程艺术》这本书

世界和我们都不该止步于此

02-17

772

好吧，现在已经2023年了，对于这本书（第二版）来说可能有点老了，这本书不是很难理解，但也不是很适合新手读，当然，这本书并不是百宝书 📕 ，它更注重于编程的规范与思路、用户的体验、实战演练，并且我在这本书中学到了不少东西，我决定将这些知识分享出来。

JavaScript---Dom编程

qq_67693370的博客

05-26

495

JavaScript---dom编程相关知识点！

JavaScript-Dom-监听事件

huiguo_的博客

10-20

939

文章目录DOM事件的学习 DOM事件的学习那么当我们按下按键时，如何获取按键的键值呢？我们可以通过给onkeydown方法添加一个参数event将我们所按下的键传入函数，在按键对象进入函数后，我们就可以通过event.keycode来获取他的键值。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

min-dom:最小的DOM实用工具。库友好，基于组件提供的实用程序

05-06

最低限度最小的dom实用工具。友好的库，基于提供的实用程序。脚印该库很小（大小为2Kb ），并且仍然公开了... event -事件绑定； matches -选择器匹配检查； query -本机选择器查询支持 remove -将节点与其父节点

Javascript-dom-manipulation

05-01

在这个"Javascript-dom-manipulation"主题中，我们将深入探讨如何使用JavaScript有效地进行DOM操作。 1. **获取DOM元素** - `getElementById`: 通过ID查找唯一元素。 - `getElementsByClassName`: 获取指定类名的...

Javascript-DOM

03-26

JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准的编程接口，用于HTML和...在`Javascript-DOM-main`这个项目中，可能包含了练习代码和示例，可以帮助你更好地理解和应用DOM相关知识。

Javascript--DOM.rar_javascript

09-24

3. `event`对象：在事件处理函数中，`event`对象提供了有关事件的信息，如事件类型、目标元素等。 4. `querySelector`和`querySelectorAll`支持伪类选择器，如`:hover`、`:active`等，使动态样式控制更为便捷。 ...

Virtual-dom-event-binding-issue:尝试使虚拟 dom 事件绑定工作

07-01

在JavaScript的世界里，虚拟DOM（Virtual DOM）是前端开发中的一种优化技术，它极大地提高了Web应用的性能。虚拟DOM允许开发者在内存中构建一个抽象的DOM树，而不是直接操作真实的DOM，这使得更新UI变得更加高效。...

日期、时间选择控件 - datetimepicker

博客

05-09

4272

http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 页面上添加控件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://cdn.bootcss.com/twitter-bootstra.

JQuery总结-ready函数、遍历数组和键值对、获取控件

博客

08-14

1516

1. ready函数：页面加载后会自动执行的函数，一般用来动态创建控件或给控件绑定事件、设置样式等。 //完整版的ready函数 $(document).ready(function () { alert("dom is ready,类似于注册一个body.onload()"); }); //简化版ready函数 $(fu