JavaScript基礎（三） 事件
事件流
事件流意味著頁面上不止一個元素可響應相同的事件
如：當我們點擊頁面上的按鈕時，實際上我們是點擊了按鈕，以及按鈕的容器——整個頁面。
事件冒泡
window ← document ← html ← body ← div
由點擊的位置擴散到整個界面
事件捕獲
由整個界面縮小到點擊的位置
window → document → html → body → div
DOM事件流
包含事件冒泡和事件捕捉
傳統事件處理程序指派方法
一、取得id = div1的元素節點。
var div1 = document.getElementById("div1");
//設置元素節點的onclick屬性
div1.onclick = function(){alert("div1 被點了");}
或
function divClick(){alert(‘點中’);}
div1.onclick=divClick;
註意： 1、綁定事件處理程序時，後面不能加括號
2.必須確保在元素之後設置事件處理程序。
3.可在window.onload中指定處理程序。
window.onload = function(){}頁面加載完成後自動調用
二、在事件屬性中指定
<div id="div1" onclick="alert("div1 被點了.");" ></div>
現代事件處理程序指派方法
DOM
var div1 = document.getElementById("div1");
//添加事件處理程序,true:捕獲階段; false:冒泡階段
div1.addEventListener("click",click1,false);
//刪除事件處理程序
div1.removeEventListener("click",click1,false);
function click1(){
alert("div1 is click...");
}
提示：刪除事件處理程序時，階段要相同。 傳統事件處理程序是在冒泡階段添加的。
事件處理程序的返回值
利用事件處理程序的返回值，可以影響事件的默認行為
超鏈接例子:
<a href="a.html" onclick="return confirm(‘要跳轉嗎？‘)">a.html</a>
註意：是根據返回結果是true或false來確定是否執行默認行為。
得到event對象
DOM
div1.onclick = function(){
var e = arguments[0];//event對象
}
或者：
在元素標簽內設置事件的時候，作為函數的參數直接傳過去，this當前節點，event就是event對象
<div onclick="text(this,event)"></div>
函數：
function text（obj,e）｛
｝
event的屬性和方法
獲取事件類型：e.type
獲取鍵盤碼：keydown/keyup
檢測是否按下e.shiftKey,e.altKey,e.ctrlKey
獲取客戶坐標:e.clientX,e.clientY //基於body的坐標
獲取屏幕坐標：e.screenX,e.screenY
獲取基於當前元素的坐標：e.offerX,e.offerY
獲取事件源 e.srcElement
獲取字符的編碼 e.keyCode
獲取字符 e.key
阻止默認行為 e.returnValue=false //可以用於限制鍵盤的輸入類型
中止冒泡傳播 e.cancelBubble=true
阻止默認事件：
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
<script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>
阻止跳轉：
<a href="javascript:void(0)">不跳轉</a>
鼠標事件
常見事件
click：單擊
dblclick：雙擊
mousedown：鼠標按下
mouseup：鼠標擡起
mouseout、mouseleave：鼠標離開
mousemove：鼠標移動
mouseenter、mouseover：鼠標進入
事件發生順序
單擊：mousedown,mouseup,click
雙擊：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick
鍵盤事件
常見事件
keydown 按下
keypress 可以阻止鍵盤輸入0
keyup 松開
事件發生順序
字符鍵：keydown,keypress,keyup
非字符鍵：keydown,keyup
HTML事件
常見事件
load：文檔加載完成
select：被選中的時候
change：內容被改變
focus：獲取焦點
resize：窗口尺寸變化
scroll：滾動條移動
blur: 失去焦點
submit: 用於阻止表單提交
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
<script>
window.onload = function () {
console.log("文檔加載完畢！");
};
/*window.onunload = function () {
alert("文檔被關閉！");
};*/
/*打印選中的文本*/
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*內容被改變時*/
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
/*得到光標*/
function myFocus() {
console.log("得到光標！");
}
/*窗口尺寸變化*/
window.onresize = function () {
console.log("窗口變化！")
};
/*滾動條移動*/
window.onscroll = function () {
console.log("滾動");
}
</script>
JavaScript基礎（三） 事件