JavaScript-5.2-JavaScript 事件-JavaScript 的事件模型
JavaScript 的事件模型
- 在 JavaScript 中事件的半丁方式被称为“事件模型”
一：DOM0 事件模型
- DOM0 事件模型是最早诞生的事件模型，也是最常用的事件绑定方式
1、内联模型
- 内联模型又称为“行内绑定”，其绑定事件的方式是直接将函数名作为 HTML 标签某个事件的属性值
<button onclick="func()">按钮</button>
缺点：
违反 W3C 关于 HTML 与 JavaScript 分离的基本原则
2、脚本模型
- 脚本模型又被称为“动态绑定”
- 通过在 JavaScript 中选中一个节点，并给节点的 onclick 事件添加监听函数
// 给 window 对象添加 onload 事件
window.onload = function(){}
// 选中 div 节点，并添加 onclick 事件
document.getElementById("div").onclick = function(){}
优点：
实现了 HTML 与 JavaScript 分离，符合 W3C 的基本原则
缺点：
1.同一节点只能绑定一个同类型事件，如果绑定多次，则只有最后一次生效
2.一旦绑定事件，无法取消事件绑定
二：DOM2 事件模型
1、添加事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM2 事件模型</title>
</head>
<body>
<div>
<button id="btn1">点击点击</button>
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1'); // 获取 button 元素节点
if(btn1.attachEvent){
// 判断浏览器是否支持 attachEvent,
btn1.attachEvent("onclick",function(){
alert("嘻嘻");
});
}else{
// 否则使用 addEventListener 进行绑定
btn1.addEventListener("click",function(){
alert("嘻嘻");
},false);
}
</script>
</html>
效果动态图
- 针对浏览器版本不同，有两种不同的绑定方式
(1) attachEvent()
var btn = document.getElementById('btn1');
btn.attachEvent("onclick",function(){
// onclick 触发时执行的回调函数
});
- 主要针对 IE8 之前的浏览器
- attachEvent() 接收两个参数
- 第一个参数是触发的事件类型，主要事件名称需要用“on”开头
- 第二个参数是触发事件时执行的回调函数
(2) addEventListener
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
// click 触发时执行的回调函数
},true/false);
- 除 IE8 之外的其他浏览器，统一使用 W3C 规范
- addEventListener() 接收三个参数
- 第一个参数是触发的事件类型，主要事件名称不需要用“on”开头
- 第二个参数是触发事件时执行的回到函数
- 第三个参数是模型参数，表示事件冒泡或事件捕获
- false(默认)：表示事件冒泡
- true：表示事件捕获
(3) 兼容写法
var btn = document.getElementById('btn');
if(btn.attachEvent){
btn.attachEvent("onclick",function{
// onclick 触发时执行的回调函数
});
}else{
btn.addEventListener("click",function(){
// click 触发时执行的回调函数
},true/false);
}
2、取消事件绑定
- DOM2 绑定的事件可以取消事件绑定
- 如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM2 事件模型</title>
</head>
<body>
<div>
<button id="btn1">点击点击</button>
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1'); // 获取 button 元素节点
// onclick 触发的函数
function clickFunction(){
alert("嘻嘻");
}
// 事件绑定
if(btn1.attachEvent){
// 判断浏览器是否支持 attachEvent,
btn1.attachEvent("onclick",clickFunction);
}else{
// 否则使用 addEventListener 进行绑定
btn1.addEventListener("click",clickFunction,false);
}
// 取消事件绑定
if(btn1.attachEvent){
btn1.detachEvent("onclick",clickFunction);
}else{
btn1.removeEventListener("click",clickFunction);
}
</script>
</html>
为什么绑定的时候不能使用匿名函数作为回调函数呢
1.取消事件绑定的时候，语法要求必须传入需要取消的函数名
2.而匿名函数没有函数名
(1) detachEvent()
- 针对 IE8 之前使用 attachEvent() 绑定的事件
btn.detachEvent("onclick",函数名);
(2) removeEventListener()
- 针对其他浏览器使用 addEventListener() 绑定的事件
btn.removeEventListener('click',函数名);
3、DOM2 事件模型的优点
- 实现了 HTML 与 JavaScript 的分离，符合 W3C 关于内容与行为分离的要求
- 实现 DOM2 绑定的事件，可以取消事件绑定
- 使用 DOM2 可以为同一节点添加多个同类型事件，多个事件可以同时生效，而不会被覆盖
扫一扫
1589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
