<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#eventArea {

				border: 1px solid black;

				width: 100px;

				height: 100px;

			}

		</style>

	</head>

	<body>

		<!-- 用div作为鼠标移动区域 -->

		<div id="eventArea"></div>

		<!-- 在p标签内显示鼠标坐标 -->

		<p id="showData"></p>

	</body>

	<script type="text/javascript">

		// 根据id找到div标签对应的元素对象

		var divEle = document.getElementById("eventArea");

		// 根据id找到p标签对应的元素对象

		var pEle = document.getElementById("showData");

		// 声明事件响应函数

		function whenMouseMove(event){

			pEle.innerText = event.clientX + " " + event.clientY;

		}

		// 将事件响应函数赋值给对应的事件属性

		// onmousemove表示在鼠标移动的时候

		divEle.onmousemove = whenMouseMove;

	</script>

</html>
 

下面是简化的代码：

document.getElementById("eventArea").onmousemove = function (event){

	document.getElementById("showData").innerText = event.clientX + " " + event.clientY;

};

JavaScript事件驱动的更多相关文章

  1. JavaScript事件驱动机制&amp;定时器机制

    在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力.在NodeJS中.异步事件驱动模型则是提高并发能力的基础. 一.程序怎样响应事件 程序响应外部的事件有两 ...

  2. JavaScript的函数和事件（转）

    一.默认函数 JavaScript提供了一些默认的函数 编码函数escape():将非字母.数字字符转换成ASCII码 译码函数unescape():将ASCII码转换成字母.数字字符 求值函数eva ...

  3. JavaScript基础知识点

    本书目录 第一章:  JavaScript语言基础 第二章:  JavaScript内置对象第三章:  窗口window对象第四章:  文档document对象第五章:  表单form对象第六章:   ...

  4. Hybrid App开发之JavaScript基础

    前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...

  5. 第二章 JavaScript文档（上）

    JavaScript 1.JavaScript简介 起源 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.Netscape在最初将其脚本语言命名 ...

  6. Node+Express+MongoDB + Socket.io搭建实时聊天应用

    Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...

  7. Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建

    前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...

  8. 深入理解Vue组件3大核心概念

    摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...

  9. javascript基础之客户端事件驱动

    我们知道,面向对象发展起来后,“一夜之间”,几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦, ...

随机推荐

  1. 使用Python3.7+Tornado5.1配合七牛云存储api来异步切分上传文件

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_123 之前写了几篇关于FastDfs分布式存储的文章:python3.7.3操作FastDfs来进行文件操作,其实市面上关于云存储 ...

  2. WPF开发随笔收录-WriteableBitmap绘制高性能曲线图

    一.前言 之前分享过一期关于DrawingVisual来绘制高性能曲线的博客,今天再分享一篇通过另一种方式来绘制高性能曲线的方法,也就是通过WriteableBitmap的方式:具体的一些细节这里就不 ...

  3. 5.23 NOI 模拟

    $5.23\ NOI $模拟 \(T1\)简单的计算几何题 \(zjr:\)我当时没改,那么自己看题解吧 倒是有个简单的随机化方法(能获得\(72pts,\)正确性未知)\(:\) 随机两条切椭圆的平 ...

  4. Spring提供的API实现文件上传

    Spring为我们提供了文件上传接口MultipartRequest及其实现类StandardMultipartFile StandardMultipartFile是StandardMultipart ...

  5. Python基础之dict和set的使用

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言种也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...

  6. fijkplayer问题反馈：暂停时拖动进度光标，在窗口模式与全屏模式间切换后，进度光标不能及时更新、正常跟进

    fijkplayer-0.8.4很优秀,造福苍生,非常感谢! 使用fijkplayer-0.8.4开发的过程中遇到以下问题,特此记录.提交上传:https://github.com/befovy/fi ...

  7. DBPack 限流熔断功能发布说明

    上周我们发布了 v0.4.0 版本,增加了限流熔断功能,现对这两个功能做如下说明. 限流 DBPack 限流熔断功能通过 filter 实现.要设置限流规则,首先要定义 RateLimitFilter ...

  8. 【HTML】学习路径3-段落标签和标题标签

    第一章:标题标签 <h1>  </h1> <h2>  </h2> 等等... 数字越大,字体尺寸越小. <!--标题会加粗.独占一行--> ...

  9. Docker 搭建 Nexus3 私服 | 基本操作

    1 Docker 安装 Nexus3 1.1 创建目录 在硬盘上创建 Nexus3 的主目录: mkdir -p /Users/yygnb/dockerMe/nexus3 为该目录添加权限: chmo ...

  10. 声明式HTTP客户端-Feign 使用入门详解

    什么是 OpenFeign OpenFeign (以下统一简称为 Feign) 是 Netflix 开源的声明式 HTTP 客户端,集成了 Ribbon 的负载均衡.轮询算法和 RestTemplat ...