<!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. 在oracle中创建管理员密码

    1.因为在安装Oracle11g时没有设置sys和system用户的密码,导致登陆不上SQLplus,后面用sqlplus / as sysdba ,密码为:root登陆上去创建了密码. 2.如下图

  2. 6.11 NOI 模拟

    \(T1\)魔法师 \(f(x)\)是各个数位之积,当\(f(x)\ne 0\),每一位只能是\(1\sim 9\),考虑数位积的质因数分解只能是\(2,3,5,7\)的形式,考虑对所有的\((a,b ...

  3. 使用 Vagrant 在 VirtualBox 安装 Linux 虚拟机

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1. 导入 2.工具介绍 3.通过Vagrant为VirtualBox安装CentOS 7 4.总结 文章推荐: 关 ...

  4. 我与Apache DolphinScheduler的成长之路

    关于 Apache DolphinScheduler社区 Apache DolphinScheduler(incubator) 于17年在易观数科立项,19年3月开源, 19 年8月进入Apache ...

  5. 全局异常处理及参数校验-SpringBoot 2.7 实战基础 （建议收藏）

    优雅哥 SpringBoot 2.7 实战基础 - 08 - 全局异常处理及参数校验 前后端分离开发非常普遍,后端处理业务,为前端提供接口.服务中总会出现很多运行时异常和业务异常,本文主要讲解在 Sp ...

  6. 获取进程产生了多少次pagefault

    怎么获取某个进程产生了多少次pagefault? 这个在ps 命令中可以看到,比如查看java的pagefault情况. ps -o maj_flt -o min_flt -p `ps -e|grep ...

  7. K8s小白？应用部署太难？看这篇就够了！

    在云原生趋势下,容器和 Kubernetes 可谓是家喻户晓,许多企业内部的研发团队都在使用 Kubernetes 打造 DevOps 平台.从最早的容器概念到 Kubernetes 再到 DevOp ...

  8. 基于 .NET 6 的轻量级 Webapi 框架 FastEndpoints

    大家好,我是等天黑. FastEndpoints 是一个基于 .NET 6 开发的开源 webapi 框架,它可以很好地替代 .NET Minimal APIs 和 MVC ,专门为开发效率而生,带来 ...

  9. 美丽的神话 flac 成龙/金喜善 美丽的神话 mp3 韩红/孙楠

    这里分享从网上收集的俩个版本的歌,都很不错,有兴趣的可以听听 以下是成龙/金喜善 flac 版本,音质不错: 美丽的神话成龙/金喜善解开我最神秘的等待星星坠落风在吹动终于再将你融入怀中两颗心颤抖相信我 ...

  10. Shiro反序列化利用

    Shiro反序列化利用 前言:hvv单位这个漏洞挺多的,之前没专门研究打法,特有此篇文章. Shiro rememberMe反序列化漏洞(Shiro-550) 漏洞原理 Apache Shiro框架提 ...