爱站程序员基地文章目录
- 一、鼠标事件
- 1.1、鼠标移动事件(onmousemove)
- 1.2、鼠标按键按下与松开事件(onmousedown/onmouseup)
- 1.3、鼠标滚轮事件(onmousewheel)
- 1.4、鼠标触碰事件(onmouseover/onmouseout)
一、鼠标事件
鼠标事件种类：
| 事件名 | 描述 |
|---|---|
| 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>
结果：
二、键盘事件
| 事件名称 | 描述 |
|---|---|
| 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（一）
