<!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. 万答#11，MySQL中char与varchar有什么区别

    万答#11,MySQL中char与varchar有什么区别 1.实验场景 GreatSQL 8.0.25 InnoDB 2.实验测试 2.1 区别 参数 char varchar 长度是否可变 定长 ...

  2. 基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  3. java-方法创建与使用

    1.方法: 1)封装一段特定的业务逻辑功能 2)方法尽可能的独立,一个方法只干一件事(低耦合) 3)方法可以被反复调用多次(高复用) 4)减少代码重复,有利于代码维护,有利于团队协作开发2.方法的定义 ...

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

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

  5. Excel 数学函数（一）：INT、TRUNC、ROUND、ROUNDUP 和 ROUNDDOWN

    前言 INT.TRUNC.ROUND.ROUNDUP 和 ROUNDDOWN 都是对一个数进行取舍,但是,各自的取舍的方式不一样. INT 函数只有一个参数:TRUNC.ROUND.ROUNDUP 和 ...

  6. java数组---特点，边界

    数组的四个基本特点 1.其长度是确定的.数组一旦被创建,它的大小就是不可以改变的. 2.其元素必须是相同类型,不允许出现混合类型. 3.数组中的元素可以是任何数据类型,包括基本类型和引用类型. 4.数 ...

  7. kubeadm部署k8s v1.19.4版本集群

    1. 准备2台2c4g虚机 配置地址192.168.198.144,192.168.198.146,一台作为master,一台作为node 2. 部署环境准备,每一台虚机都需要操作 # 关闭防火墙sy ...

  8. 宝塔面板服务器ip地址修改域名

    参考博客:请点击百度 今天登录宝塔面板是突然忘记了服务器IP地址,从而导致了以下这种情况. 其实我以前是买过一个域名的,但是并没有绑定到宝塔上面.从而就一直拿IP登录宝塔面版.现在用命令方式更换域名, ...

  9. 【多服务场景化解决方案】智能家居(UrbanHome)

    ​ 介绍 UrbanHome是一款提供房屋维修服务的移动应用.如有维修需求,用户可通过该应用联系所在城市的管道工,电工,保洁,漆匠,木匠,修理工等,或是搜寻导航附近的维修商店. 通过构建UrbanHo ...

  10. git hooks在业务中的使用

    起因 最近公司项目发生了一起线上事故,最后排查下来是配置文件的问题.项目里application.yml文件内会用@build.time@记录打包时的时间,但是这个写法是build-helper-ma ...