JavaScript事件驱动
<!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事件驱动的更多相关文章
- JavaScript事件驱动机制&定时器机制
在浏览器中,事件作为一个极为重要的机制,给予JavaScript响应用户操作与DOM变化的能力.在NodeJS中.异步事件驱动模型则是提高并发能力的基础. 一.程序怎样响应事件 程序响应外部的事件有两 ...
- JavaScript的函数和事件（转）
一.默认函数 JavaScript提供了一些默认的函数 编码函数escape():将非字母.数字字符转换成ASCII码 译码函数unescape():将ASCII码转换成字母.数字字符 求值函数eva ...
- JavaScript基础知识点
本书目录 第一章: JavaScript语言基础 第二章: JavaScript内置对象第三章: 窗口window对象第四章: 文档document对象第五章: 表单form对象第六章: ...
- Hybrid App开发之JavaScript基础
前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...
- 第二章 JavaScript文档（上）
JavaScript 1.JavaScript简介 起源 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.Netscape在最初将其脚本语言命名 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...
- 深入理解Vue组件3大核心概念
摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...
- javascript基础之客户端事件驱动
我们知道,面向对象发展起来后,“一夜之间”,几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦, ...
随机推荐
- Vue 事件的基本使用 && 事件修饰符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Java SE 8 新增特性
Java SE 8 新增特性 作者:Grey 原文地址: Java SE 8 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new_ ...
- APT 安装 MySQL 提示错误：dpkg: error: dpkg frontend lock is locked by another process
在安装 MySQL 的时候提示错误: ubuntu@VM-0-6-ubuntu:/opt$ sudo dpkg -i mysql-apt-config_0.8.22-1_all.deb dpkg: e ...
- openjdk的bug
容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 下面列一下我们是怎么排查并解这个问题的. 一.故障现象 oppo内核 ...
- spring接口多实现类，该依赖注入哪一个？
一.问题的描述 在实际的系统应用开发中我经常会遇到这样的一类需求,相信大家在工作中也会经常遇到: 同一个系统在多个省份部署. 一个业务在北京是一种实现方式,是基于北京用户的需求. 同样的业务在上海是另 ...
- 关于stm32f10xRB系列的PB5和PB12外设冲突问题
上周在公司做了一个项目,调试一个mcu,本以为很简单的调试一下裸机驱动,但是调试过程中遇到了一些问题让我觉得比较有意思,记录一下. 1.关于stm32的SMBUS功能的介绍 由于笔者也没有玩过 ...
- C#基础_类与对象的关系
类不占内存,对象占内存
- python(第四版阅读心得)（系统工具）（一）
本章将会讲解python常用系统工具的介绍 python中大多数系统级接口都集中在两个模块: sys 和 os 但仍有部分其他标准模块也属于这个领域 如: 常见: glob 用于文件名扩展 soc ...
- Homework4
书籍链接:https://www.ituring.com.cn/article/13466(why Software Development Methodologies Suck?) 问:读 why ...
- KingbaseES V8R6集群维护之--修改数据库服务端口案例
案例说明: 对于KingbaseES数据库单实例环境,只需要修改kingbase.conf文件的'port'参数即可,但是对于KingbaseES V8R6集群中涉及到多个配置文件的修改,并且在应 ...