JavaScript常用的事件模型
一、事件绑定模型
DOM0事件模型
1.内联模型（行内绑定）：将函数名直接作为HTML标签中事件属性的属性值
<button id="btn" onclick="func()">内联模型绑定</button>
缺点：不符合W3C中关于内容与行为分离的基本规范
2.脚本模型（动态绑定）：通过在JS中选中某个节点，然后给节点添加onclick属性。
<button id="btn1">脚本模型绑定</button>
<script>
document.getElementById("btn1").onclick = function () {
alert("");
};
</script>
优点：符合W3C中关于内容与行为分离的基本规范，实现HTML与JS的分离。
3.DOM0共有缺点：
a.同一个节点只能添加一次同一事件，如果添加多次最后一个生效
b.通过DOM0绑定的事件，一旦绑定将无法取消（虽然行内绑定可以removeAttribute但不算）
DOM2事件模型
1.添加DOM2事件绑定：
①IE8之前，使用.attachEvent("onclick",func3);谷歌不支持这种写法
②IE8之后，使用.addEventListener("click",func3,true/false);
参数三：false（默认）表示事件冒泡；传入true 表示事件捕获；
③兼容所有浏览器的处理方式：
<button id="btn2">DOM2模型绑定</button>
<script>
var btn2 = document.getElementById("btn2");
if(btn2.attachEvent){
btn2.attachEvent("onclick",func3);
}else{
btn2.addEventListener("click",func3);
}
function func3(){
alert("");
}
</script>
2.DOM2绑定的优点
①同一个节点可以绑定多个同类事件
<script>
btn2.addEventListener("click",function(){
alert("第二次绑定click事件");
});
</script>
②使用DOM2绑定的事件可以有专门的函数进行事件取消
3.DOM2取消事件绑定：
①使用.attachEvent("onclick",func3);绑定，要用.detachEvent("onclick",func3);取消
②使用.addEventListener("click",func3);绑定，要用.removeEventListener("click",func3);取消
③兼容所欲浏览器的处理方式：
注意：如果DOM2绑定的事件，需要取消，则绑定事件时，回调函数必须是函数名，而不能是匿名函数。
因为取消事件时需要传入函数名进行取消
<button id="btn3">取消DOM2模型绑定</button>
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
if(btn2.detachEvent){
btn2.detachEvent("onclick",func3);
}else {
btn2.removeEventListener("click",func3);
}
alert("事件已取消！");
};
</script>
二、事件流模型
1.事件冒泡(false或默认)：当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点
2.事件捕获(true)：当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
↓ DOM根节点 ↑ 捕 冒 ↓ 祖先节点 ↑ 获 泡 ↓ 当前节点 ↑
3.什么时候事件冒泡，什么时候事件捕获？
①当使用addEventListener绑定事件，第三个参数传入true时表示事件捕获；
②除此之外全都是事件冒泡
<body>
<div id="div1">1
<div id="div2">2
<div id="div3">3</div>
</div>
</div>
</body>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
//事件冒泡
div1.addEventListener("click",function () {
console.log("div1 click 1");
});
div2.addEventListener("click",function () {
//myParagraphEventHandler();
console.log("div2 click 2")
});
div3.addEventListener("click",function () {
console.log("div3 click 3");
}); //事件捕获
div1.addEventListener("click",function () {
console.log("div1 click 1");
},true);
div2.addEventListener("click",function () {
//myParagraphEventHandler();
console.log("div2 click 2")
},true);
div3.addEventListener("click",function () {
console.log("div3 click 3");
},true);
</script>
4.阻止事件冒泡：
①IE10之前（包含10），使用：e.cancelBubble = true;
②IE10之后，使用：event.stopPropagation();
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后和其他浏览器
} else {
e.cancelBubble = true; //IE10以前（包含10）
}
}
5.阻止默认事件：
①IE10之前（包含10），使用：e.returnValue = false;
②IE10之后，使用：e.preventDefault();
<a href="01-事件笔记.html" onclick="func()">超链接</a>
<script>
function func(e) {
e = e || window.event;
eventHandler(e);
alert("您点击了超链接但是您走不了哈哈哈哈哈！！！");
}
//阻止默认事件的函数
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE10以后和其他浏览器
} else {
e.returnValue = false; //IE10以前（包含10）
}
}
</script>
JavaScript常用的事件模型的更多相关文章
- 说说JavaScript中的事件模型
1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...
- 理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
- JavaScript中的事件模型
JS中的事件 1.鼠标事件 onclick ondbclick onmouseover onmouseout 2.HTML事件 onload onunload onsubmit ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- javascript之BOM事件注册和案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- JavaScript事件模型及事件代理
事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...
随机推荐
- (NO.00002)iOS游戏精灵战争雏形(五)
完成了精灵自己移动之后,我们开始着手实现按住精灵拖动的功能. 要想处理触摸事件,我们需要做2件事: 1.在类的初始化中打开触摸接收属性 2.实现触摸处理回调方法 我们依次来做这2件事. 首先要搞清楚在 ...
- 从"按层次输出二叉树"到"求解二叉树深度"的总结
本文是在学习中的总结,欢迎转载但请注明出处:http://write.blog.csdn.net/postedit/41964669 最近在刷LeetCode上的算法题,发现好多题目的解题思路大体是一 ...
- 浅谈SystemClock 和Thead的区别和联系
其实将SystemClock 和Thead直接放在一起是不合适的,我们首先来看下他们所在的api. public final class SystemClock extends Object java ...
- 《java入门第一季》之类面试题
面试题一: String,StringBuffer,StringBuilder的区别? * A:String是内容不可变的,而StringBuffer,StringBuilder都是内容可变的. ...
- TCP的核心系列 — SACK和DSACK的实现（五）
18版本对于每个SACK块,都是从重传队列头开始遍历.37版本则可以选择性的遍历重传队列的某一部分,忽略 SACK块间的间隙.或者已经cache过的部分.这主要是通过tcp_sacktag_skip( ...
- "C#"：MySql批量数量导入
现在对数据库(以MySql为例)的操作大多会封装成一个类,如下例所示: namespace TESTDATABASE { public enum DBStatusCode { ALL_OK, MySq ...
- 海量数据处理 - 10亿个数中找出最大的10000个数（top K问题）
前两天面试3面学长问我的这个问题(想说TEG的3个面试学长都是好和蔼,希望能完成最后一面,各方面原因造成我无比想去鹅场的心已经按捺不住了),这个问题还是建立最小堆比较好一些. 先拿10000个数建堆, ...
- Bloom filter 2
1 Bloom filter 计算方法 如需要判断一个元素是不是在一个集合中,我们通常做法是把所有元素保存下来,然后通过比较知道它是不是在集合内,链表.树都是基于这种思路,当集合内元素个数的变大,我们 ...
- javascript、ruby和C性能一瞥(3) :上汇编
在博文(1)和(2)里分别用了4中方式写一个素数筛选的算法,分别是javascript in browser.node.js.ruby和c:最终的结果是c最快,node.js其次,js in b虽然也 ...
- ruby轻松自删除代码
因为windows的文件删除机制和unix like的不一样,so不保证如下代码能在windows中使用,哪位童鞋帮我在windows中测试一下也好啊! #!/usr/bin/ruby 5.times ...