文章目录

一、鼠标事件
- 1.1、鼠标移动事件(onmousemove)
- 1.2、鼠标按键按下与松开事件(onmousedown/onmouseup)
- 1.3、鼠标滚轮事件(onmousewheel)
- 1.4、鼠标触碰事件(onmouseover/onmouseout)
二、键盘事件
三、Bom 浏览器对象模型
四、定时器

一、鼠标事件

鼠标事件种类：

事件名	描述
onclick	单击鼠标左键时触发
ondblclick	双击鼠标左键时触发
onmouseover	鼠标移动到元素上时触发
onmouseout	鼠标移除该元素边界时触发
onmousedown	鼠标任意一个按键按下时触发
onmouseup	松开鼠标任意一个按键时触发
onmousemove	鼠标移动时被触发
onmousewheel	鼠标滚轮事件

1.1、鼠标移动事件(onmousemove)

鼠标移动时被触发

示例一：
(鼠标移动时，在input文本框中显示鼠标位置（坐标）)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title>
</head>
<body><input type="text" id="text"><div><script>var text = document.getElementById("text");document.onmousemove = function (event) {//event--事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传入响应函数。text.value = 'x:'+event.pageX+' '+'y:'+event.pageY;}</script></div>
</body>
</html>

结果：

示例二：
(div随鼠标移动)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>#box{width: 50px;height: 50px;background-color: green;position: absolute;}</style>
</head>
<body><div id="box"></div><script>var box = document.getElementById("box");document.onmousemove = function (event) {// 获取鼠标x和y值var x = event.pageX;var y = event.pageY;// 设置div的偏移量box.style.left = x + 'px';box.style.top = y + 'px';}</script>
</body>
</html>

结果：

注意：这里获取鼠标位置为什么使用 pageX 和 pageY ？同样是获取鼠标位置它们和 clientX、clientY 有什么区别？

clientX、clientY 是用于获取鼠标在当前的可见窗口坐标
pageX 、pageY 用于获取鼠标相对当前页面的坐标

举个简单的例子同样是div随鼠标移动，如果页面高度够大则会形成滚动条，如果使用clientX、clientY这时当我们滑动滚动条后，鼠标再次移动div盒子可能不会跟着移动，如果使用pageX 、pageY就不会有这个问题了。

1.2、鼠标按键按下与松开事件(onmousedown/onmouseup)

onmousedown：鼠标任意一个按键按下时触发
onmouseup：松开鼠标任意一个按键时触发

示例：
(鼠标拖拽div)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>#box{width: 100px;height: 100px;background-color: green;position: absolute;}#box2{width: 100px;height: 100px;background-color: red;position: absolute;left: 100px;top: 100px;}</style>
</head>
<body><div id="box"></div><div id="box2"></div><script>/*思路：1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown2.当鼠标移动时被拖拽元素根随鼠标一起移动onmousemove3.当鼠标松开时，被拖拽元素固定到当前位置onmouseup*/// 获取boxvar box = document.getElementById("box");// 给box绑定一个鼠标按下事件box.onmousedown = function(event){// 求出div的偏移量// 鼠标的x减去元素的left值// 鼠标的y减去元素的top值var ol = event.clientX - box.offsetLeft; //offsetLeft获取元素的left值var ot = event.clientY - box.offsetTop;//offsetTop获取元素的top值// 跟随鼠标进行移动，document.onmousemove = function(event){var x = event.pageX-ol;var y = event.pageY-ot;// 修改box位置box.style.left = x+"px";box.style.top = y+"px";}document.onmouseup = function(){// 固定box到松开位置// 取消document的鼠标移动事件document.onmousemove = null;// 取消鼠标松开事件document.onmouseup = null;}/*注意这里不使用box.onmouseup，因为如果使用了，当鼠标不在box元素上松开时就会出问题*/}</script>
</body>
</html>

结果：

1.3、鼠标滚轮事件(onmousewheel)

常用事件对象的wheelDelta来判断滚轮滚动的方向，大于0向上，小于0向下。

示例：
（当鼠标滚轮向下滚动时，box变长，向上滚动时，box就变短）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 100px;height: 100px;background-color: #FF0000;}</style></head><body style="height: 2000px;"><div id="box"></div><script type="text/javascript">var box = document.getElementById("box");// box绑定鼠标滚轮事件box.onmousewheel = function(event){if(event.wheelDelta>0){// 向上滚动box.style.height = box.clientHeight -10+"px";}else{// 向下滚动box.style.height = box.clientHeight + 10+"px";}// 当滚轮滚动时，如果浏览器带了轮动条，滚动时随浏览器进行滚动，属于浏览器的默认行为，如果不希望发生，可以取消默认行为return false;  //添加return false 取消默认行为 }</script></body>
</html>

结果：

注意：我这里用的是谷歌浏览器，如果用其他浏览器的话代码的书写可能会有点变化。

1.4、鼠标触碰事件(onmouseover/onmouseout)

onmouseover：鼠标移动到元素上时触发
onmouseout：鼠标移出该元素边界时触发

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript(一)作业</title><style>#back{width: 100px;height: 100px;background-color: #00BFFF;}</style>
</head>
<body><div id="back" onmouseover="mOver(this)" onmouseout="mOut(this)">我还是我</div><button id="btn1" class="bt">颜色更改</button><script type="application/javascript">var box = document.getElementById("back");var btn1 = document.getElementById("btn1")btn1.onclick = function(){box.style.backgroundColor = "green";}function mOver(box) {box.innerHTML = "我就是我"}function mOut(box) {box.innerHTML = "我还是我"}</script>
</body>
</html>

结果：

注意：onmouseenter(onmouseleave)也是鼠标移动到元素上(移出该元素边界)时触发，它们的区别在于onmouseenter(onmouseleave)在鼠标移入或者移出选定元素上时触发，而onmouseover(onmouselout)在鼠标移入或者移出选定元素和子元素上时触发。

二、键盘事件

事件名称	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开

对于键盘事件一般都会绑定给一些可以获取到焦点的对象(有光标，如文本框),或者document对象

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style></style>
</head>
<body><input type="text" id="inp"><script>var inp = document.getElementById("inp");inp.onkeydown = function (ev) {//判断c是否被触发了if(event.keyCode==67){console.log("被按下了");}}</script>
</body>
</html>

结果：(按下c键后)

被按下了

注意：keyCode 获取的是按键的ASCII，除了 keyCode 之外，事件对象中还提供了几个属性：altKey、ctrlkey 、shiftkey可以判断alt ctrl shift是否被按下，如果按下则返回 true 否则返回 false。

三、Bom 浏览器对象模型

JavaScript 是运行在浏览器中的，因此提供了一系列对象用于浏览器进行交互。这些对象主要有：

window:代表整个浏览器窗口，同时window也是网页中的全局对象；
Navigator：代表浏览器的信息，可以通过这个对象识别不同的浏览器；
Location:地址，代表浏览器的地址栏信息，或者操作浏览器跳转页面；
History：代表浏览器的历史记录，由于涉及隐私，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后。

注意：bom 对象都是作为 windown 对象的属性来保存的，可以通过 window 对象来使用，也可以直接使用。

示例：

<body><button type="button" id="btn">这是个按钮</button><script type="text/javascript">console.log(window)   ;console.log(window.navigator);// userAgent就是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent，所以可以通过这个属性来判断浏览器的信息console.log(navigator.userAgent);var btn = document.getElementById("btn");// $("#btn")btn.onclick = function(){// 跳转到百度window.location = "http://www.baidu.com";//window.location = "css.html";  //这里也可以转跳到自己写的html文件// 刷新函数//location.reload();   }</script>
</body>

历史记录对象

示例：

<body><h1>历史记录页面</h1><script type="text/javascript">// length  获取当前访问到的连接数量alert(history.length);// back();可以回退到上一个页面，作用和浏览器的回退按钮一致// forward():可以跳转到下一个页面，作用和浏览器的前进按钮一致// go():可以用来跳转到指定页面，需要传递一个整数作为参数 如果/* 参数为1：代表向前跳转一个页面2：代表向前跳转二个页面-1：代表向后跳一个页面-2：代表向后跳二个页面*/</script></body>

四、定时器

函数	描述
setTimeout	设置定时器
clearTimeout	清除定时器
setInterval	设置定时器
clearInterval	清除定时器

示例一：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例</title></head><body><h1 id="count">1</h1><script>var h = document.getElementById("count");// window.setInterval();// 定时调用，可以将一个函数每隔一段时间执行一次// 参数：// 1.回调函数，该函数会每隔一段时间被调用一次// 2.每次调用间隔的时间，单位是毫秒var num = 1;// 返回值：返回数字，代表定时器的标识var timer = window.setInterval(function(){h.innerHTML = num++;if(num==11){window.clearInterval(timer);}},500);// 清除定时器// 需要传入一个定时器的标识作为参数，这样就可以关闭对应的定时器</script></body>
</html>

示例二：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>示例</title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color:red;position: absolute;}</style></head><body><button type="button" id="btn">点击按钮之后div向右移动</button><div id="box"></div><script type="text/javascript">var btn = document.getElementById("btn");var box = document.getElementById("box");btn.onclick = function(){var timer = setInterval(function(){var oldValue =  getStyle(box,"left");var ov = window.parseInt(oldValue);// 在旧值的基础上增加var newvalue = ov+10;// 给left进行赋值box.style.left = newvalue+"px";// 当元素移动到800px时，停止if(newvalue>=400){// 清除定时器clearInterval(timer);}},100);}// 用来获取某一个元素的样式function getStyle(obj,name){// getComputedStyle();var cssobj = getComputedStyle(obj,null);return cssobj[name];}</script></body>
</html>

结果：

有想学习 JavaScript 基本运用的可以看看我这几篇博客：
学习笔记（五）——JavaScript（二）
学习笔记（四）——JavaScript（一）

学习笔记（六）——JavaScript（三）相关推荐

JavaScript 学习笔记（第三天）
JavaScript 学习笔记(第三天) 一.数组 1.1.数组的基础 1.2.数据类型分类 1.3.创建数组 1.3.1.字面量创建一个数组 1.3.2.内置构造函数创建数组 1.4.数组的基本操作 ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
吴恩达《机器学习》学习笔记六——过拟合与正则化
吴恩达<机器学习>学习笔记六--过拟合与正则化一. 过拟合问题 1.线性回归过拟合问题 2.逻辑回归过拟合问题 3.过拟合的解决二. 正则化后的代价函数 1.正则化思想 2.实际使用的 ...
opencv 手选roi区域_【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
【K210】K210学习笔记六——MaixHub在线模型训练识别数字
[K210]K210学习笔记六--MaixHub在线模型训练识别数字前言 K210准备工作数据的获取 MaixHub如何在线训练模型训练模型在K210上的测试小结前言本人大四学生,电赛生涯 ...
Java学习笔记六、面向对象编程中级部分
Java学习笔记六.面向对象编程中级部分包包的注意事项和使用细节访问修饰符访问修饰符的注意事项和使用细节面向对象编程三大特征封装封装的实现步骤(三步) 继承继承的细节问题继承的本质 ...
判断题:oracle自带的sql语言环境是pl/sql,Oracle之PL/SQL学习笔记之数据类型(三)
Oracle之PL/SQL学习笔记之数据类型(三) 所有的编程语言中变量是使用最频繁的.PL/SQL作为一个面向过程的数据库编程语言同样少不了变量,利用变量可以把PL/SQL块需要的参数传递进来,做到 ...
Ethernet/IP 学习笔记六
Ethernet/IP 学习笔记六 EtherNet/IP defines two primary types of communications: explicit and implicit (Ta ...
机器学习理论《统计学习方法》学习笔记：第三章 k近邻法
机器学习理论<统计学习方法>学习笔记:第三章 k近邻法 3 k近邻法 3.1 K近邻算法 3.2 K近邻模型 3.2.1 模型 3.2.2 距离度量 3.2.3 K值的选择 3.2.4 分 ...
Kinect开发学习笔记之（三）Kinect开发环境配置
Kinect开发学习笔记之(三)Kinect开发环境配置 zouxy09@qq.com http://blog.csdn.net/zouxy09 我的Kinect开发平台是: Win7 x86 + V ...

学习笔记（六）——JavaScript（三）