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也是基于对象的语言.用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦, ...
随机推荐
- 关于javascript中this
------------恢复内容开始------------ 1 var number = 5; 2 var obj = { 3 number: 3, 4 fn1: (function () { 5 ...
- 深入分析FragmentPagerAdapter和FragmentStatePagerAdapter
最近遇到比较奇怪的bug,TableLayout+ViewPager实现点击顶部tab切换viewpager视图.但是在Viewpager设置dapter时,最开始设置的是FragmentPagerA ...
- 使用 Less 混合（Mixins）时报语法错误
今天在尝试使用 less 的混合语法时,浏览器直接报了一个语法错误.下图是报错信息: 仔细地阅读了官方文档,和对比自己写的,并没有任何错误. .FlexLayout { .Start() { disp ...
- LGV 引理——二维DAG上 n 点对不相交路径方案数
文章目录 引入 简介 定义 引理 证明 例题 释疑 扩展 引入 有这样一个问题: 甲和乙在一张网格图上,初始位置 ( x 1 , y 1 ) , ( x 2 , y 2 ) (x_1,y_1),(x_ ...
- 【Homebrew】安装
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 官网安 ...
- SpringMVC 01: SpringMVC + 第一个SpringMVC项目
SpringMVC SpringMVC概述: 是基于MVC开发模式的框架,用来优化控制器 是Spring家族的一员,也具备IOC和AOP 什么是MVC: 它是一种开发模式,是模型视图控制器的简称,所有 ...
- 第九十三篇：ESLint:可组装的javaScript和JSX检查工具
好家伙, 1.什么是ESLint? 代码检查工具,用来检查你的代码是否符合指定的规范 2.ESLint有什么用? 统一JavaScript代码风格的工具 在合作开发的时候, 每个成员的代码风格都有可能 ...
- 《Java编程思想》读书笔记（四）
前言:三年之前就买了<Java编程思想>这本书,但是到现在为止都还没有好好看过这本书,这次希望能够坚持通读完整本书并整理好自己的读书笔记,上一篇文章是记录的第十七章到第十八章的内容,这一次 ...
- gin如何多次shoubind一个请求参数
gin多次绑定请求参数 package main import ( "fmt" "net/http" "time" "github ...
- 【android 逆向】arm if
#include <stdio.h> void if1(int n){ //if else语句 if(n < 10){ printf("the number less th ...