DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;
事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM1的信息啊,);
DOM0就是直接通过 onclick写在html里面的事件, 比如:
<input onclick="alert(1)" />
DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
DOM3是一些新的事件, 区别DOM3和DOM2的方法我感觉是DOM3事件有分大小写的,DOM2没有;
事件流(现在很流行偷图么么哒)
IE的事件流是冒泡, 从里面往上面冒, netscape是从外部元素往内部元素捕获;
而DOM2级的事件规定了事件流包含三个阶段包括： 1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段（IE8以及更早版本不支持DOM事件流）;
DOM0事件
<input onclick="alert(event)" />
<form>
<input name="hehe" value="hehe" />
<input onclick="alert(hehe.value)">
所有DOM0的事件作用域被扩展了哇;
</form>
DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的哇;
DOM2事件
DOM2事件的冒泡和捕获
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
#c { width: 100px; height: 100px; border: 1px solid red; }
</style>
</head>
<body>
<div id="p">
parent
<div id="c">
child
</div>
</div>
<script type="text/javascript">
var p = document.getElementById('p'),
c = document.getElementById('c');
c.addEventListener('click', function () {
alert('子节点捕获')
}, true); c.addEventListener('click', function (e) {
alert('子节点冒泡')
}, false); p.addEventListener('click', function () {
alert('父节点捕获')
}, true); p.addEventListener('click', function () {
alert('父节点冒泡')
}, false);
</script>
</body>
</html>
这个依次会打出父节点捕获,子节点捕获,子节点冒泡和父节点冒泡,(注意：如果你在目标元素上改变绑定事件的顺序, 这些事件可能就不按照捕获和冒泡的顺序来了，而是根据捕获和冒泡的顺序进行触发 , 这个有解决方法,参考:) ==>>(叶小钗的东东)http://www.cnblogs.com/yexiaochai/p/3567597.html );
捕获的事件是按照顺序执行的, 而冒泡的事件在有的浏览器中的按照顺序执行有的按照相反的顺序执行;
说实话啊，事件捕获没啥用处么么哒;
还有一点要注意的是：元素点击里面的this有问题哦, 在IE8和和IE8以前, 通过attachEvent绑定的事件里面的this是window;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
</style>
</head>
<body>
<div id="p">
p
</div>
<script type="text/javascript">
var p = document.getElementById('p');
p.attachEvent("onclick",function(){
alert(this);
})
//在IE5678这个弹出的是window哦,这个要主要, 要让this 指向这个元素通过apply或者call改变上下文
</script>
</body>
</html>
chrome下有个getEventListeners可以获取元素绑定事件， 从小钗哪里抄的,代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="d">ddssdsd</div>
<script type="text/javascript">
var node = document.getElementsByTagName('*');
var d = document.getElementById('d');
d.addEventListener('click', function () {
alert();
}, false);
d.addEventListener('click', function () {
alert('我是第二次');
}, false);
d.onclick = function () {
alert('不规范的绑定');
}
d.addEventListener('click', function () {
alert();
}, true); d.addEventListener('mousedown', function () {
console.log('mousedown');
}, true);
var evets = typeof getEventListeners == 'function' && getEventListeners(d);
getEventListeners(d)
</script>
</body>
</html>
这个兼容问题常见的解决方法，一般来说够用了：
<script>
var eventUtil = {
add : function(el, type, handler) {
if(el.addEventListener) {
el.addEventListener(type, handler, false);
}else if( el.attachEvent ) {
el.attachEvent("on"+type, handler);
}else{
el["on"+type] = handler;
}
},
off : function(el, type, handler) {
if( el.removeEventListener ) {
el.removeEventListener(type, handler, false)
}else if( el.detachEvent ) {
el.detachEvent(type, handler);
}else{
el["on"+type] = null;
}
}
};
</script>
事件对象
无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
</style>
</head>
<body>
<div id="p">
p
</div>
<script type="text/javascript">
var p = document.getElementById('p');
p.addEventListener("click",function(){
console.log(arguments[0]);
})
</script>
</body>
</html>
事件对象event下的属性和方法：
因为各个浏览器的事件对象不一样, 把主要的时间对象的属性和方法列出来;
bubble ： 表明事件是否冒泡
cancelable ： 表明是否可以取消冒泡
currentTarget ： 当前时间程序正在处理的元素, 和this一样的;
defaultPrevented： false ，如果调用了preventDefualt这个就为真了;
detail： 与事件有关的信息(滚动事件等等)
eventPhase： 如果值为1表示处于捕获阶段， 值为2表示处于目标阶段，值为三表示在冒泡阶段
target || srcElement： 事件的目标
trusted： 为ture是浏览器生成的，为false是开发人员创建的（DOM3）
type ： 事件的类型
view ： 与元素关联的window， 我们可能跨iframe；
preventDefault() 取消默认事件；
stopPropagation() 取消冒泡或者捕获；
stopImmediatePropagation() (DOM3)阻止任何事件的运行；
//stopImmediatePropagation阻止 绑定在事件触发元素的 其他同类事件的callback的运行 IE下的事件对象是在window下的，而标准应该作为一个参数, 传为函数第一个参数;
IE的事件对象定义的属性跟标准的不同，如：
cancelBubble 默认为false, 如果为true就是取消事件冒泡;
returnValue 默认是true，如果为false就取消默认事件;
srcElement, 这个指的是target, Firefox下的也是srcElement;
小胡子的事件解惑：打开
叶小钗的事件入门：打开
DOM0,DOM2,DOM3事件,事件基础知识入门的更多相关文章
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- DOM0 DOM2 DOM3
DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. DOM 定义了访问 HTML 和 ...
- Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
- Hibernate入门1. Hibernate基础知识入门
Hibernate入门1. Hibernate基础知识入门 20131127 前言: 之前学习过Spring框架的知识,但是不要以为自己就可以说掌握了Spring框架了.这样一个庞大的Spring架构 ...
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- Oracle 基础知识入门
前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...
- SpringMVC（一） 基础知识+入门案例
SpringMVC基础知识 1.什么是Springmvc 2.springmvc 框架的原理(必须掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.SpringMVC 入门程序 目的:对 ...
- AngularJS实用基础知识---入门必备
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...
- java学习基础知识入门
基础入门知识(一) 一.java技术的分类 java按照技术标准和应用场景的不同分为三类,分别是JAVASE.JAVAEE.JAVAME JAVASE : 平台标准版,用于开发部署桌面,服务器以及嵌入 ...
随机推荐
- EM basics- the Maxwell Equations
All the two important problems that the EM theory trys to describe and explain are propogation and r ...
- 【读书笔记《Android游戏编程之从零开始》】8.Android 游戏开发常用的系统控件（系统控件常见问题）
Android 中常用的计量单位Android有时候需要一些计量单位,比如在布局Layout文件中可能需要指定具体单位等.常用的计量单位有:px.dip(dp).sp,以及一些不常用的pt.in.mm ...
- HDU 2669 Romantic【扩展欧几里德】
裸的扩展欧几里德,求最小的X,X=((X0%b)+b)%b,每个X都对应一个Y,代入原式求解可得 #include<stdio.h> #include<string.h> ty ...
- Cg关键字(keywords)
保留标识符 除了下面列出的,任何以两个的下划线作为前缀(例如,__ newType)的标识符被保留. 注意,矩阵(matrix)和向量类型(vector types)(如half2x3或float4) ...
- Unity的物理材质
Physic Materials资源包 在Unity中的项目导入Unity自带的资源包 Physic Materials,自带的资源包有不同种类的物理材质: Bouncy:有弹性的 Ice:结冰 Me ...
- Linux命令学习－mpstat
mpstat 用于获取多个 CPU 相关统计信息的有用的命令是 mpstat.下面是一个示例输出: # mpstat -P ALL 5 2 Linux 2.6.9-67.ELsmp (oraclera ...
- Tsung测试openfire服务器
环境准备 安装Tsung.安装openfire.安装Spark Tsung使用 要对openfire进行压力测试,因此我们主要讲解如何利用jabber_register.xml在openfire上面注 ...
- BUG描述规范
BUG描述规范 一. 目的与适用范围 1.1 目的 报告软件测试错误的目的是为了保证修复错误的人员可以明确报告的错误,从而有利于分析错误产生的原因,定位错误,然后修正之.因此,报告软件测试错误的基本要 ...
- HTTPS实现原理
HTTPS实现原理 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版 ...
- MemCached配置与缓存知识概述
先看看百度百科里面对缓存的介绍: 缓存(Cache memory)是硬盘控制器上的一块内存芯片,具有极快的存取速度,它是硬盘内部存储和外界接口之间的缓冲器.由于硬盘的内部数据传输速度和外界介面传输速度 ...