JS事件
努力不一定成功,不努力肯定不能成功 ---forever
- onClick 單擊事件
- onMouseOver 鼠標(biāo)經(jīng)過事件
- onMouseOut 鼠標(biāo)移出事件
- onChange 文本內(nèi)容改變事件
- onSelect 文本框選中事件
- onFocus 光標(biāo)聚集事件
- onBlur 移開光標(biāo)事件
- onLoad 網(wǎng)頁加載事件
- onUnload 關(guān)閉網(wǎng)頁事件
事件流
- 事件流 :
描述的是在頁面中接受事件的順序 - 事件冒泡 :
由最具體的元素接收,然后逐級向上傳播至最不具體的元素的節(jié)點(diǎn)(文檔) - 事件捕獲 :
最不具體的節(jié)點(diǎn)先接收事件,而最具體的節(jié)點(diǎn)應(yīng)該是最后接收事件
事件處理
- HTML事件處理:
直接添加到HTML結(jié)構(gòu)中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="sayBye()">按鈕</button>
<script>
function sayBye() {
alert("bye");
}
</script>
</body>
</html>
- DOMO級事件處理:
把一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?/li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="sayBye()">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function sayBye() {
alert("bye");
};
</script>
</body>
</html>
- DOM2級事件處理
- addEventListener("事件名", "事件處理函數(shù)", "布爾值");
- true:事件捕獲
- false:事件冒泡
- removeEventListener();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="sayBye()">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", eat);
btn.addEventListener("click", play);
function eat() {
alert("DOM2級事件處理吃事件!")
}
function play() {
alert("DOM2級事件處理玩事件")
}
btn.removeEventListener("click", eat);
</script>
</body>
</html>
- IE事件處理程序
- attachEvent
- detachEvent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="sayBye()">按鈕</button>
<!--適配瀏覽器-->
<script>
var btn = document.getElementById("btn");
if (btn.addEventListener) {
btn.addEventListener("click", demo)
} else if (btn.attachEvent) {
btn.attachEvent("click", demo);
} else {
btn.onclick = demo();
}
function demo() {
alert("你是我的女神!");
}
</script>
</body>
</html>
總結(jié):優(yōu)缺點(diǎn)
- HTML事件處理:比較繁瑣,修改好多地方
- 0級處理:能被覆蓋掉
- 在開發(fā)中一般使用2級響應(yīng)事件,靈活性強(qiáng)
事件對象
- 事件對象: 在觸發(fā)DOM事件的時(shí)候都會(huì)產(chǎn)生一個(gè)對象
- 事件對象event
- type:獲取事件類型
- target:獲取事件目標(biāo)
- stopPropagation():阻止事件冒泡
- preventDefault():阻止事件默認(rèn)行為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="sayBye()">按鈕</button>
<script>
document.getElementById("btn").addEventListener("click", showType);
function showType(event) {
alert(event.type);
}
</script>
</body>
</html>
- preventDefault():阻止事件默認(rèn)行為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="sayBye()">按鈕</button>
<a id="aID">百度一下</a>
<script>
document.getElementById("btn").addEventListener("click", showType);
document.getElementById("div").addEventListener("click", showEvent);
document.getElementById("aID").addEventListener("click", showDetail);
function showType(event) {
alert(event.type);
alert(event.target);
event.stopPropagation(); // 阻止冒泡
}
function showEvent() {
alert(div);
}
function showDetail() {
event.stopPropagation();
event.preventDefault(); // 阻止事件默認(rèn)行為
}
</script>
</div>
</body>
</html>
