<!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. Hive存储格式之RCFile详解，RCFile的过去现在和未来

    我在整理Hive的存储格式和压缩格式,本来打算一篇发出来,结果其中一小节就有很多内容,于是打算写成Hive存储格式和压缩格式系列. 本节主要讲一下Hive存储格式最早的典型的列式存储格式RCFile. ...

  2. Host long.com not found: 2(SERVFAIL)

    环境: centos  7.9 地址:192.168.200.100 相关配置 name.conf文件: named.zones文件: 正反解析文件: 重启DNS服务: 1 [root@server ...

  3. Java SE 10 新增特性

    Java SE 10 新增特性 作者:Grey 原文地址:Java SE 10 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new ...

  4. 这次我设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架

    作者:冰河 博客地址:https://binghe001.github.io 大家好,我是冰河~~ 没错,这次冰河又要搞事情了,这次准备下手的是RPC框架项目.为什么要对RPC框架项目下手呢,因为在如 ...

  5. P4767 [IOI2000]邮局 - 平行四边形不等式优化DP

    There is a straight highway with villages alongside the highway. The highway is represented as an in ...

  6. 【读书笔记】C#高级编程 第十六章 错误和异常

    (一)简介 错误的出现并不总是编写应用程序的人的原因,有时应用程序会因为应用程序的最终用户引发或运行代码的环境而发生错误.C#提供了异常处理机制来处理错误. (二)异常类 在C#中,但刚出现某个特殊的 ...

  7. Java SE 4、继承

    继承 基本语法 class 子类 extends 父类{ } 子类就会自动拥有父类定义的属性和方法 父类又叫 超类,基类,子类又叫 派生类 细节 子类继承了所有的属性和方法,非私有的属性和方法可以在子 ...

  8. Logstash： 如何创建可维护和可重用的Logstash管道

  9. Loki 简明教程

    文章转载参考自:https://jishuin.proginn.com/p/763bfbd2ac34 Loki 是 Grafana Labs 团队最新的开源项目,是一个水平可扩展,高可用性,多租户的日 ...

  10. Alertmanager结合Slack使用

    Slack作为一款即时通讯工具,协作沟通主要通过Channel(平台)来完成,用户可以在企业中根据用途添加多个Channel,并且通过Channel来集成各种第三方工具. 例如,我们可以为监控建立一个 ...