<!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. 设计模式(一)----设计模式概述及UML图解析

    1.设计模式概述 1.1 软件设计模式的产生背景 "设计模式"最初并不是出现在软件设计中,而是被用于建筑领域的设计中. 1977年美国著名建筑大师.加利福尼亚大学伯克利分校环境结构 ...

  2. 浅淡 Apache Kylin 与 ClickHouse 的对比

    作者简介 周耀,Kyligence 解决方案架构师,Apache Kylin.Apache Superset Contributor. Apache Kylin 和 ClickHouse 都是目前市场 ...

  3. CF580D Kefa and Dishes （状压DP）

    枚举最后食物 #include <iostream> #include <cstdio> #include <cstring> #include <algor ...

  4. MyBatis 01 概述

    官网 http://www.mybatis.org/mybatis-3/zh/index.html GitHub https://github.com/mybatis/mybatis-3 简介 MyB ...

  5. dotnet 设计规范 · 抽象定义

    严格来说,只有一个类被其他的类继承,那么这个类就是基类.在很多时候,基类的定义是提供足够的抽象和通用方法和属性.默认实现.在继承关系中,基类定义在上层抽象和底层自定义之间. 他们充当抽象实现的实现帮助 ...

  6. Android配置OpenCV C++开发环境

    网上的OpenCV配置环境大部分都不能正常配置成功,不是编译时报找不到so,就是运行找不到so.本文是我试了不少坑才找到的配置方法.其原理是让AndroidStudio自己根据mk文件自动配置. 1. ...

  7. Javaweb___Jquery高级

    今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. sh ...

  8. KingbaseES R3 集群一键修改集群用户密码案例

    案例说明: 在KingbaseES R3集群的最新版本中增加了kingbase_monitor.sh一键修改集群用户密码的功能,本案例是对此功能的测试. kingbaseES R3集群一键修改密码说明 ...

  9. 小结event.target与this

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  10. 电商平台物流模块自建OR对接第三方物流平台

    ​ 前沿 近几年来,电商行业竞争变得愈加激烈,公域流量获客成本越来越高,电商平台规则也越来越严格,数据无法出塔,商家无法自主运营用户群等等原因,很多大品牌纷纷开始搭建自有商城,运营私域流量,以此来降低 ...