一领虹、JavaScript中的事件處理
1烹俗、在標簽上使用onXXX屬性來進行事件綁定（不推薦使用）
<button onclick="sayHello()">按鈕1</button>
<script type="text/javascript">
function sayHello(){
alert("Hello!");
}
2禁荸、通過代碼獲取標簽綁定onXXX屬性（不推薦使用）
<button id="button1">按鈕1</button>
<script type="text/javascript">
var button1 = document.getElementById("button1");
button1.textContent = "點我呀！";
button1.onclick = sayHello;
function sayHello(){
alert("Hello!");
}
</script>
3葫录、通過diamante獲取標簽然后使用addEventListener綁定事件（推薦）
方法一：內(nèi)部JS
<button id="button1">按鈕1</button>
<script type="text/javascript">
var button1 = document.getElementById("button1");
//判斷因為IE瀏覽器低版本不兼容
if (button1.addEventListener){
button1.textContent = "點我呀着裹！";
button1.addEventListener("click",sayHello);
button1.addEventListener("click",sayGoodbye);
button1.addEventListener("click",function(){
button1.removeEventListener("click",sayHello); //移除事件監(jiān)聽
button1.removeEventListener("click",sayGoodbye);
})
}else{
//低版本IE瀏覽器使用的代碼
button1.attachEvent("onclick",sayHello);
button1.attachEvent("onclick",sayGoodbye);
button1.attachEvent("click",function(){
button1.detachEvent("onclick",sayHello); //移除事件監(jiān)聽
button1.detachEvent("onclick",sayGoodbye);
})
}
function sayHello(){
alert("Hello!");
}
function sayGoodbye(){
alert("Goodbye！")
}
</script>
方法二：外部封裝JS函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="button1">按鈕1</button>
<script src="js/new_file.js"></script>
<script type="text/javascript">
var button1 = document.getElementById("button1");
// 綁定事件的回調(diào)函數(shù)（callback function）
// 你知道事件發(fā)生的時候米同，但是不知道事件什么時候發(fā)生骇扇，只是進行綁定。
bind(button1, "click", sayHello);
bind(button1, "click", sayGoodbye);
bind(button1, "click", function(){
onbind(button1, "click", sayHello);
})
function sayHello(){
alert("Hello!");
}
function sayGoodbye(){
alert("Goodbye面粮！")
}
</script>
</body>
</html>
//js文件
function bind(elem, event, fn){
if (elem.addEventListener){
elem.addEventListener(event, fn);
}else{
elem.attachEvent("on" + event, fn);
}
}
function onbind(elem, event, fn){
if (elem.removeEventListener){
elem.removeEventListener(event, fn);
}else{
elem.detachShader("on" + event, fn);
}
}
在事件回調(diào)函數(shù)中獲取事件源（易錯點）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="buttons">
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<button>button5</button>
</div>
<script src="js/javascript.js"></script>
<script type="text/javascript">
var buttons = document.querySelectorAll("#buttons>button");
for (var i = 0; i<buttons.length; i+=1){
//如果希望在事件回調(diào)函數(shù)中獲得事件源
//應該通過事件對象的target屬性去獲取事件源
bind(buttons[i], "click", function(evt){
//取事件源不能用下標去獲取
evt = evt || window.event; //兼容ie代碼
evt.target.textContent = "歐耶";
})
}
</script>
</body>
</html>
二少孝、事件回調(diào)函數(shù)和事件對象
綁定事件監(jiān)聽器的函數(shù)都需要傳入事件的回調(diào)函數(shù)，程序員因為事件發(fā)生的時候要做什么熬苍，但是不知道什么時候發(fā)生稍走，所以傳入一個函數(shù)在將來發(fā)生事件的時候，由事件調(diào)用，這種就叫回調(diào)函數(shù)婿脸。
回調(diào)函數(shù)的第一個參數(shù)代表事件對象（封裝了和事件相關的所有信息）粱胜，對于低版本的IE，可以通過window.event來獲取事件對象盖淡。
事件對象的屬性和方法：
1年柠、target / srcElement(IE) - 事件源（引發(fā)事件的標簽）
2、阻止事件的默認行為褪迟，比如：a標簽 --> preventDefault()
if (evt.preventDefault){
evt.preventDefault();
}else{
evt.returnValue = false; //兼容ie
}
3冗恨、事件的捕獲和冒泡
事件冒泡 內(nèi) --> 外（子代-->父代）（默認 false）
事件捕獲 外 --> 內(nèi) （true）
停止事件傳播（捕獲和冒泡） -- stopPropagation()
IE瀏覽器只有冒泡 -- cancelBubble = true
猜數(shù)字游戲（網(wǎng)頁版）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="number" id="input" placeholder="猜0~10的數(shù)字"/>
<input type="button" id="confirm" value="確定">
<script type="text/javascript">
var count = 0;
var num = parseInt(Math.random()*11);
var guess = document.getElementById("input");
var confirm = document.getElementById("confirm");
confirm.addEventListener("click", guess_number);
// 判斷回車
guess.addEventListener("keydown",function(evt){
evt = evt || window.event;
if (evt.keyCode == 13 || evt.which == 13){
guess_number();
}
})
function guess_number(){
var thyAnswer = parseInt(guess.value);
count += 1;
if (thyAnswer > num){
alert("大了大了~");
}else if(thyAnswer < num){
alert("小了小了~");
}else if(thyAnswer == num){
alert("恭喜你猜對了，一共猜了"+count+"次味赃！");
confirm.disabled = true; //禁止按鈕
guess.disabled = true; //禁止輸入框
}
guess.value = ""; //清除文本框內(nèi)容
guess.focus(); //獲得焦點
}
</script>
</body>
</html>
效果：
三掀抹、JS中創(chuàng)建對象常用方法
1、
2心俗、
