當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
学习笔记（六）——JavaScript（三）
生活随笔
收集整理的這篇文章主要介紹了
学习笔记（六）——JavaScript（三）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、鼠標事件
- 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文本框中顯示鼠標位置（坐標）)
結果：
示例二：
(div隨鼠標移動)
結果：
注意：這里獲取鼠標位置為什么使用 pageX 和 pageY ？同樣是獲取鼠標位置它們和 clientX、clientY 有什么區別？
clientX、clientY 是用于獲取鼠標在當前的可見窗口坐標
pageX 、pageY 用于獲取鼠標相對當前頁面的坐標
舉個簡單的例子同樣是div隨鼠標移動，如果頁面高度夠大則會形成滾動條，如果使用clientX、clientY這時當我們滑動滾動條后，鼠標再次移動div盒子可能不會跟著移動，如果使用pageX 、pageY就不會有這個問題了。
1.2、鼠標按鍵按下與松開事件(onmousedown/onmouseup)
onmousedown：鼠標任意一個按鍵按下時觸發
onmouseup：松開鼠標任意一個按鍵時觸發
示例：
(鼠標拖拽div)
結果：
1.3、鼠標滾輪事件(onmousewheel)
常用 事件對象的wheelDelta來判斷滾輪滾動的方向，大于0向上，小于0向下。
示例：
（當鼠標滾輪向下滾動時，box變長，向上滾動時，box就變短）
結果：
注意：我這里用的是 谷歌瀏覽器 ，如果用其他瀏覽器的話代碼的書寫可能會有點變化。
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（
- 下一篇： 学习笔记（九）——JSON 和 AJAX