javascript
学习笔记（六）——JavaScript（三）
文章目錄
- 一、鼠標(biāo)事件
- 1.1、鼠標(biāo)移動(dòng)事件(onmousemove)
- 1.2、鼠標(biāo)按鍵按下與松開(kāi)事件(onmousedown/onmouseup)
- 1.3、鼠標(biāo)滾輪事件(onmousewheel)
- 1.4、鼠標(biāo)觸碰事件(onmouseover/onmouseout)
- 二、鍵盤(pán)事件
- 三、Bom 瀏覽器對(duì)象模型
- 四、定時(shí)器
一、鼠標(biāo)事件
鼠標(biāo)事件種類：
| onclick | 單擊鼠標(biāo)左鍵時(shí)觸發(fā) |
| ondblclick | 雙擊鼠標(biāo)左鍵時(shí)觸發(fā) |
| onmouseover | 鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā) |
| onmouseout | 鼠標(biāo)移除該元素邊界時(shí)觸發(fā) |
| onmousedown | 鼠標(biāo)任意一個(gè)按鍵按下時(shí)觸發(fā) |
| onmouseup | 松開(kāi)鼠標(biāo)任意一個(gè)按鍵時(shí)觸發(fā) |
| onmousemove | 鼠標(biāo)移動(dòng)時(shí)被觸發(fā) |
| onmousewheel | 鼠標(biāo)滾輪事件 |
1.1、鼠標(biāo)移動(dòng)事件(onmousemove)
鼠標(biāo)移動(dòng)時(shí)被觸發(fā)
示例一：
(鼠標(biāo)移動(dòng)時(shí)，在input文本框中顯示鼠標(biāo)位置（坐標(biāo)）)
結(jié)果：
示例二：
(div隨鼠標(biāo)移動(dòng))
結(jié)果：
注意：這里獲取鼠標(biāo)位置為什么使用 pageX 和 pageY ？同樣是獲取鼠標(biāo)位置它們和 clientX、clientY 有什么區(qū)別？
clientX、clientY 是用于獲取鼠標(biāo)在當(dāng)前的可見(jiàn)窗口坐標(biāo)
pageX 、pageY 用于獲取鼠標(biāo)相對(duì)當(dāng)前頁(yè)面的坐標(biāo)
舉個(gè)簡(jiǎn)單的例子同樣是div隨鼠標(biāo)移動(dòng)，如果頁(yè)面高度夠大則會(huì)形成滾動(dòng)條，如果使用clientX、clientY這時(shí)當(dāng)我們滑動(dòng)滾動(dòng)條后，鼠標(biāo)再次移動(dòng)div盒子可能不會(huì)跟著移動(dòng)，如果使用pageX 、pageY就不會(huì)有這個(gè)問(wèn)題了。
1.2、鼠標(biāo)按鍵按下與松開(kāi)事件(onmousedown/onmouseup)
onmousedown：鼠標(biāo)任意一個(gè)按鍵按下時(shí)觸發(fā)
onmouseup：松開(kāi)鼠標(biāo)任意一個(gè)按鍵時(shí)觸發(fā)
示例：
(鼠標(biāo)拖拽div)
結(jié)果：
1.3、鼠標(biāo)滾輪事件(onmousewheel)
常用 事件對(duì)象的wheelDelta來(lái)判斷滾輪滾動(dòng)的方向，大于0向上，小于0向下。
示例：
（當(dāng)鼠標(biāo)滾輪向下滾動(dòng)時(shí)，box變長(zhǎng)，向上滾動(dòng)時(shí)，box就變短）
結(jié)果：
注意：我這里用的是 谷歌瀏覽器 ，如果用其他瀏覽器的話代碼的書(shū)寫(xiě)可能會(huì)有點(diǎn)變化。
1.4、鼠標(biāo)觸碰事件(onmouseover/onmouseout)
onmouseover：鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)
onmouseout：鼠標(biāo)移出該元素邊界時(shí)觸發(fā)
示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript(一)作業(yè)</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>結(jié)果：
注意：onmouseenter(onmouseleave)也是鼠標(biāo)移動(dòng)到元素上(移出該元素邊界)時(shí)觸發(fā)，它們的區(qū)別在于onmouseenter(onmouseleave)在鼠標(biāo)移入或者移出選定元素上時(shí)觸發(fā)，而onmouseover(onmouselout)在鼠標(biāo)移入或者移出選定元素和子元素上時(shí)觸發(fā)。
二、鍵盤(pán)事件
| onkeydown | 某個(gè)鍵盤(pán)按鍵被按下 |
| onkeyup | 某個(gè)鍵盤(pán)按鍵被松開(kāi) |
對(duì)于鍵盤(pán)事件一般都會(huì)綁定給一些可以獲取到焦點(diǎn)的對(duì)象(有光標(biāo)，如文本框),或者document對(duì)象
示例：
<!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是否被觸發(fā)了if(event.keyCode==67){console.log("被按下了");}}</script> </body> </html>結(jié)果：(按下c鍵后)
被按下了注意：keyCode 獲取的是按鍵的ASCII，除了 keyCode 之外，事件對(duì)象中還提供了幾個(gè)屬性：altKey、ctrlkey 、shiftkey可以判斷alt ctrl shift是否被按下，如果按下則返回 true 否則返回 false。
三、Bom 瀏覽器對(duì)象模型
JavaScript 是運(yùn)行在瀏覽器中的，因此提供了一系列對(duì)象用于瀏覽器進(jìn)行交互。這些對(duì)象主要有：
window:代表整個(gè)瀏覽器窗口，同時(shí)window也是網(wǎng)頁(yè)中的全局對(duì)象；
Navigator：代表瀏覽器的信息，可以通過(guò)這個(gè)對(duì)象識(shí)別不同的瀏覽器；
Location:地址，代表瀏覽器的地址欄信息，或者操作瀏覽器跳轉(zhuǎn)頁(yè)面；
History：代表瀏覽器的歷史記錄，由于涉及隱私，該對(duì)象不能獲取到具體的歷史記錄，只能操作瀏覽器向前或者向后。
注意：bom 對(duì)象都是作為 windown 對(duì)象的屬性來(lái)保存的，可以通過(guò) window 對(duì)象來(lái)使用，也可以直接使用。
示例：
<body><button type="button" id="btn">這是個(gè)按鈕</button><script type="text/javascript">console.log(window) ;console.log(window.navigator);// userAgent就是一個(gè)字符串，這個(gè)字符串中包含有用來(lái)描述瀏覽器信息的內(nèi)容，不同的瀏覽器會(huì)有不同的userAgent，所以可以通過(guò)這個(gè)屬性來(lái)判斷瀏覽器的信息console.log(navigator.userAgent);var btn = document.getElementById("btn");// $("#btn")btn.onclick = function(){// 跳轉(zhuǎn)到百度window.location = "http://www.baidu.com";//window.location = "css.html"; //這里也可以轉(zhuǎn)跳到自己寫(xiě)的html文件// 刷新函數(shù)//location.reload(); }</script> </body>歷史記錄對(duì)象
示例：
<body><h1>歷史記錄頁(yè)面</h1><script type="text/javascript">// length 獲取當(dāng)前訪問(wèn)到的連接數(shù)量alert(history.length);// back();可以回退到上一個(gè)頁(yè)面，作用和瀏覽器的回退按鈕一致// forward():可以跳轉(zhuǎn)到下一個(gè)頁(yè)面，作用和瀏覽器的前進(jìn)按鈕一致// go():可以用來(lái)跳轉(zhuǎn)到指定頁(yè)面，需要傳遞一個(gè)整數(shù)作為參數(shù) 如果/* 參數(shù)為1：代表向前跳轉(zhuǎn)一個(gè)頁(yè)面2：代表向前跳轉(zhuǎn)二個(gè)頁(yè)面-1：代表向后跳一個(gè)頁(yè)面-2：代表向后跳二個(gè)頁(yè)面*/</script></body>四、定時(shí)器
| setTimeout | 設(shè)置定時(shí)器 |
| clearTimeout | 清除定時(shí)器 |
| setInterval | 設(shè)置定時(shí)器 |
| clearInterval | 清除定時(shí)器 |
示例一：
<!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();// 定時(shí)調(diào)用，可以將一個(gè)函數(shù)每隔一段時(shí)間執(zhí)行一次// 參數(shù)：// 1.回調(diào)函數(shù)，該函數(shù)會(huì)每隔一段時(shí)間被調(diào)用一次// 2.每次調(diào)用間隔的時(shí)間，單位是毫秒var num = 1;// 返回值：返回?cái)?shù)字，代表定時(shí)器的標(biāo)識(shí)var timer = window.setInterval(function(){h.innerHTML = num++;if(num==11){window.clearInterval(timer);}},500);// 清除定時(shí)器// 需要傳入一個(gè)定時(shí)器的標(biāo)識(shí)作為參數(shù)，這樣就可以關(guān)閉對(duì)應(yīng)的定時(shí)器</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">點(diǎn)擊按鈕之后div向右移動(dòng)</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);// 在舊值的基礎(chǔ)上增加var newvalue = ov+10;// 給left進(jìn)行賦值box.style.left = newvalue+"px";// 當(dāng)元素移動(dòng)到800px時(shí)，停止if(newvalue>=400){// 清除定時(shí)器clearInterval(timer);}},100);}// 用來(lái)獲取某一個(gè)元素的樣式function getStyle(obj,name){// getComputedStyle();var cssobj = getComputedStyle(obj,null);return cssobj[name];}</script></body> </html>結(jié)果：
有想學(xué)習(xí) JavaScript 基本運(yùn)用的可以看看我這幾篇博客：
學(xué)習(xí)筆記（五）——JavaScript（二）
學(xué)習(xí)筆記（四）——JavaScript（一）
總結(jié)
以上是生活随笔為你收集整理的学习笔记（六）——JavaScript（三）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 学习笔记（五）——JavaScript（
- 下一篇： 学习笔记（九）——JSON 和 AJAX