JS事件
努力不一定成功,不努力肯定不能成功 ---forever
- onClick 单击事件
- onMouseOver 鼠标经过事件
- onMouseOut 鼠标移出事件
- onChange 文本内容改变事件
- onSelect 文本框选中事件
- onFocus 光标聚集事件
- onBlur 移开光标事件
- onLoad 网页加载事件
- onUnload 关闭网页事件
事件流
- 事件流 :
描述的是在页面中接受事件的顺序 - 事件冒泡 :
由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) - 事件捕获 :
最不具体的节点先接收事件,而最具体的节点应该是最后接收事件
事件处理
- HTML事件处理:
直接添加到HTML结构中
<!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级事件处理:
把一个函数赋值给一个事件处理程序属性
<!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("事件名", "事件处理函数", "布尔值");
- 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>
总结:优缺点
- HTML事件处理:比较繁琐,修改好多地方
- 0级处理:能被覆盖掉
- 在开发中一般使用2级响应事件,灵活性强
事件对象
- 事件对象: 在触发DOM事件的时候都会产生一个对象
- 事件对象event
- type:获取事件类型
- target:获取事件目标
- stopPropagation():阻止事件冒泡
- preventDefault():阻止事件默认行为
<!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():阻止事件默认行为
<!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 href="http://www.baidu.com" 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(); // 阻止事件默认行为
}
</script>
</div>
</body>
</html>
