dom中的event

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量132 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tangfeifei/p/9018441.html
版权 
<html>
<body>
<head>
    <style>
        .box {
            width: 300px;
            height: 200px;
            padding-top: 100px;
            background-color: pink;
            margin: 100px;
            text-align: center;
            font: 18px/30px "simsun";
            cursor: pointer;
        }
    </style>
</head>
<div class="box">

</div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var div = document.getElementsByClassName('box')[0];
        div.onmousemove = function(event){
            event = event || window.event;//window.event 兼容ie6/7/8
            var pageX = event.pageX || scroll().left + event.clientX;//pageX
            var pageY = event.pageY || scroll().top + event.clientY;
            this.innerHTML = "鼠标在盒子中的X坐标为：" + (pageX - this.offsetLeft) + "px;<br>鼠标在盒子中的Y坐标为：" + (pageY - this.offsetTop) + "px;";
        }
    }
</script>

 

 

原文参见:https://github.com/tangfeifei351/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/12-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md

转载于:https://www.cnblogs.com/tangfeifei/p/9018441.html

diaochuan8112
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html的DOM中Event对象onblur事件用法实例
09-03
HTML DOM中的Event对象是用于处理页面中各种交互事件的核心组件，它提供了丰富的接口来响应用户的操作，如点击、鼠标移动等。在众多事件中，`onblur`事件是一个非常实用的事件，它会在一个元素失去焦点时触发。这...
DOM Event（事件）对象
tian_to_tian的博客
08-19 1226
一、什么是事件 事件：就是与浏览器交互的瞬间。 事件的作用：通过事件去驱动（触发）程序，从而实现一些特定的操作。 二、事件流 事件流：指页面中执行事件的顺序 分类： 1、事件冒泡流：点击的具体的元素向最不具体的元素，一层一层的向上冒泡 点击的元素 -> body -> html -> document -> window 2、捕获流：从最不具体的元素到最具体的元素，一层一层的向下捕获 window -> document -> html -> bo
DOM基础--event对象
四岁爱上了她的博客
09-01 599
event对象 当DOM事件发生时，我们需要更深入地了解事件的相关内容，比如触发事件的元素、键盘按键的信息、鼠标的位置等。浏览器会创建一个 event 对象，将时间相关的详细信息放入其中，并将其作为参数传递给处理程序。 1.1获取事件对象 1.2事件对象的属性方法 1.3鼠标事件对象 1.4键盘事件对象 ...
DOM事件类型、event对象，最详解析。
热门推荐
LeslieCheung_的博客
05-11 1万+
目录事件对象（一）DOM中的事件对象⑴ 示例⑵ 所有事件都有的event对象的属性和方法① currentTarget | this | targer 的区别 事件对象 在触发DOM上的某个事件时，会产生一个事件对象event，这个事件对象包含着所有与事件有关的信息，例如事件是冒泡还是捕获，事件的目标，鼠标坐标，键盘按下的键，等等信息，不要太好用 下面一起来看看event事件对象都有哪些内容吧。 （一）DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论DOM0
DOM事件参数——event对象
weixin_44001906的博客
07-07 331
事件的名称 click ；load；mouseover；事件处理程序以**‘on**’开头；因此click事件的事件处理程序就是onclick；load事件的事件处理程序就是onload；HTML事件处理程序可以直接在事件处理程序中，添加执行的函数，也可以进行调用其他地方定义的脚本； event对象 HTML事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量 event ，也就是事件对象。在用户触发事件，元素执行事件处理函数的时候，默认会向事件处理函数传入一个 event 对象，它记录
详细解析DOM事件的event事件对象（一）
qq_39155611的博客
06-03 507
详细解析DOM事件的event事件对象（一） 近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。 HTML代码： <form> <input type="text" id="text"> <!-- <input type="submit"> --> <button>登录</button>
html的DOM中Event对象onabort事件用法实例
09-03
在DOM中，Event对象是一个核心概念，它提供了处理各种浏览器事件的方法和属性。`onabort`事件是Event对象的一个特定事件类型，主要用于处理图像加载中断的情况。 `onabort`事件在以下情况会被触发： 1. 当用户在...
Javascript Event事件中IE与标准DOM的比较
10-29
- DOM中，事件对象作为处理函数的第一个参数传递，例如`document.onclick = function(event) { ... }`。 4. **获取目标元素**： - IE使用`srcElement`属性来获取触发事件的元素，如`var oTarget = oEvent....
JavaScript HTML DOM EventListener
01-19
JavaScript HTML DOM EventListener addEventListener() 方法 实例 在用户点击按钮时触发监听事件： document.getElementById(myBtn).addEventListener(click, displayDate); addEventListener() 方法用于向...
DOM：dom事件对象event
weixin_46682277的博客
03-25 462
event就是一个事件对象，写到监听函数里，小括号内，当形参来看； event只有有了事件才会存在的，是系统默认自动创建的，不需要传递实参； event事件对象，是一系列数据的集合，是和事件相关的，比如鼠标点击事件，event内就包含了鼠标的相关信息；如果是键盘事件，event内就包含了键盘的相关信息。 <button>按钮</button> <script> var btn = document.querySelector("button"); btn.addE.
DOM中的event对象详解 — 第13.3.1节
flyingpig2016的博客
11-28 861
理解事件对象 追根溯源事件对象，才发现自己会的微不足道！   在触发DOM的事件的时候，浏览器会默认产生一个event对象，这个对象包含了所有与该事件有关的信息，比如：鼠标点击页面的某个按钮会让事件对象中包含对象的节点、鼠标的位置….等信息。 * 一：对于直接在html里写入的事件，通过变量event来输出event对象：*<input type="button" value="按钮3" on
DOM事件中Event对象常见属性/方法
搞毛线的工程师
03-21 681
1.阻止默认事件（例如A标签设置click，防止A标签默认跳转） event.preventDefault() 2.阻止冒泡（例如父级元素绑定事件，子元素页绑定事件，如果不取消冒泡，则点击子元素也会触发父元素事件） event.stopPropagation() 3.阻止后续事件触发，写在A中，则后续注册的事件B不会被触发（例如按钮绑定两个事件，通过优先级的方式注册了A和B，在运行...
Dom 里定义的onclick怎样传入event事件
KevinMiGuan的博客
11-01 1万+
onclick自带event事件，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;bod
DOM中Event 对象如何使用
weixin_34148340的博客
06-02 73
DOM中Event 对象如何使用 一、总结 一句话总结： 1、将event作为参数传递进来，然后就可以调用event对象的各种属性和方法了。 <body onmousedown="whichButton(event)"> 2、事件通常与函数结合使用，函数不会在事件发生前被执行！ 之前： 1、包括页面事件和键盘鼠标等外设的事件，就是监听所有对它可能影响的操作 ...
js写的位置,添加事件的时候传递参数的方法
01-05 2634
1.js的位置必须是dom节点之后，否则就会说找不到节点。 click hereinit();function init(){  document.getElementById("myHeader").onclick = test(33);//必须放在这，如果放在head中的话，就会说找不到myHeader节点}function test
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 233
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 375
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 199
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 924
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
What are the two ways in which an event handler can be associated with an event generated by a specific HTML element in the DOM 0 event model?
05-24
In the DOM 0 event model, there are two ways to associate an event handler with an event generated by a specific HTML element: 1. Using an event attribute: You can add an event attribute to the ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值