dom中的event

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量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
    评论
DOM Event（事件）对象
tian_to_tian的博客
08-19 1221
一、什么是事件 事件：就是与浏览器交互的瞬间。 事件的作用：通过事件去驱动（触发）程序，从而实现一些特定的操作。 二、事件流 事件流：指页面中执行事件的顺序 分类： 1、事件冒泡流：点击的具体的元素向最不具体的元素，一层一层的向上冒泡 点击的元素 -> body -> html -> document -> window 2、捕获流：从最不具体的元素到最具体的元素，一层一层的向下捕获 window -> document -> html -> bo
DOM事件参数——event对象
weixin_44001906的博客
07-07 330
事件的名称 click ；load；mouseover；事件处理程序以**‘on**’开头；因此click事件的事件处理程序就是onclick；load事件的事件处理程序就是onload；HTML事件处理程序可以直接在事件处理程序中，添加执行的函数，也可以进行调用其他地方定义的脚本； event对象 HTML事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量 event ，也就是事件对象。在用户触发事件，元素执行事件处理函数的时候，默认会向事件处理函数传入一个 event 对象，它记录
DOM中的event对象详解 — 第13.3.1节
flyingpig2016的博客
11-28 861
理解事件对象 追根溯源事件对象，才发现自己会的微不足道！   在触发DOM的事件的时候，浏览器会默认产生一个event对象，这个对象包含了所有与该事件有关的信息，比如：鼠标点击页面的某个按钮会让事件对象中包含对象的节点、鼠标的位置….等信息。 * 一：对于直接在html里写入的事件，通过变量event来输出event对象：*<input type="button" value="按钮3" on
DOM中Event 对象如何使用
weixin_34148340的博客
06-02 72
DOM中Event 对象如何使用 一、总结 一句话总结： 1、将event作为参数传递进来，然后就可以调用event对象的各种属性和方法了。 <body onmousedown="whichButton(event)"> 2、事件通常与函数结合使用，函数不会在事件发生前被执行！ 之前： 1、包括页面事件和键盘鼠标等外设的事件，就是监听所有对它可能影响的操作 ...
详细解析DOM事件的event事件对象（一）
qq_39155611的博客
06-03 506
详细解析DOM事件的event事件对象（一） 近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。 HTML代码： <form> <input type="text" id="text"> <!-- <input type="submit"> --> <button>登录</button>
DOM基础--event对象
四岁爱上了她的博客
09-01 591
event对象 当DOM事件发生时，我们需要更深入地了解事件的相关内容，比如触发事件的元素、键盘按键的信息、鼠标的位置等。浏览器会创建一个 event 对象，将时间相关的详细信息放入其中，并将其作为参数传递给处理程序。 1.1获取事件对象 1.2事件对象的属性方法 1.3鼠标事件对象 1.4键盘事件对象 ...
html的DOM中Event对象onblur事件用法实例
09-03
HTML DOM中的Event对象是用于处理页面中各种交互事件的核心组件，它提供了丰富的接口来响应用户的操作，如点击、鼠标移动等。在众多事件中，`onblur`事件是一个非常实用的事件，它会在一个元素失去焦点时触发。这...
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事件中Event对象常见属性/方法
搞毛线的工程师
03-21 680
1.阻止默认事件（例如A标签设置click，防止A标签默认跳转） event.preventDefault() 2.阻止冒泡（例如父级元素绑定事件，子元素页绑定事件，如果不取消冒泡，则点击子元素也会触发父元素事件） event.stopPropagation() 3.阻止后续事件触发，写在A中，则后续注册的事件B不会被触发（例如按钮绑定两个事件，通过优先级的方式注册了A和B，在运行...
js写的位置,添加事件的时候传递参数的方法
01-05 2634
1.js的位置必须是dom节点之后，否则就会说找不到节点。 click hereinit();function init(){  document.getElementById("myHeader").onclick = test(33);//必须放在这，如果放在head中的话，就会说找不到myHeader节点}function test
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：dom事件对象event
weixin_46682277的博客
03-25 461
event就是一个事件对象，写到监听函数里，小括号内，当形参来看； event只有有了事件才会存在的，是系统默认自动创建的，不需要传递实参； event事件对象，是一系列数据的集合，是和事件相关的，比如鼠标点击事件，event内就包含了鼠标的相关信息；如果是键盘事件，event内就包含了键盘的相关信息。 <button>按钮</button> <script> var btn = document.querySelector("button"); btn.addE.
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 666
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 387
原生WebSocket： new WebSocket。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 295
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 268
解决页面放大，图片模糊的问题
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 180
vue 自定义滚动条同步拖动（移动端）
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 HTML element that contains the JavaScript code to be executed when the event is triggered. For example, you can use the `onclick` attribute to attach a click event handler to a button element as follows: ``` <button onclick="myFunction()">Click me</button> ``` In this example, `myFunction()` will be executed when the button is clicked. 2. Using a DOM property: You can also use a DOM property to attach an event handler to an HTML element. For example, you can use the `onclick` property of the button element to attach a click event handler as follows: ``` var myButton = document.getElementById("myButton"); myButton.onclick = function() { // code to be executed when the button is clicked }; ``` In this example, the function assigned to the `onclick` property will be executed when the button is clicked.

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值