认识DOM
DOM全称是document object model(文档对象模型),那DOM是用来干什么的呢?假设把你的文档看成一个单独的对象,DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE 的事件流是事件冒泡流,而 Netscape 的事件流是事件捕获流
事件冒泡
事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
二、事件处理程序
1.HTML事件处理程序
<button id="btn1" onclick="showmsg()">按键1</button>
/** html事件处理程序
如button1中那样直接在html元素标签里使用,缺点:html代码中包含js,一旦js代码发生变动,相应的html也要做相应的修改,不推荐使用
*/
2.DOM 0级事件处理程序
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
alert("这是通过DOM0级添加的事件")
}
/* DOM 0级事件处理程序
优点:js代码和html代码是分开的,js是绑定在元素的属性上,并不是在元素上直接绑定,
很好的实现了js与html的分离,更好的进行维护,推荐使用,而且它可以添加多个事件,按定义的先后顺序行进执行
*/
3.DOM 2级事件处理程序
function showmsg() {
alert("hello world");
}
var btn3 = document.getElementById("btn3");
btn3.addEventListener('click',showmsg,false); //添加事件
//btn3.removeEventListener('click',showmsg,false); //删除事件
/** DOM 2级事件处理程序
addEventListener(type, listener , false)
removeEventListener(type, listener ,false)
第三个参数可选 默认false 表示事件句柄在冒泡阶段执行 true表示事件句柄在捕获阶段执行
注意:事件不用 on 例如点击事件直接写 'click' ,同样推荐使用,它也可以添加多个事件,按定义的先后顺序行进执行
*/
4.IE事件处理程序
function showmsg() {
alert("hello world");
}
var btn3 = document.getElementById("btn3");
btn3.attachEvent('onclick',showmsg); //IE添加事件
//btn3.detachEvent('onclick',showmsg); //IE删除事件
/* IE事件处理程序
attachEvent(type, listener)添加事件
detachEvent(type, listener)删除事件
接受相同的两个参数:事件处理的名称 和 事件处理的函数
不使用第三个参数的原因是:IE8以及更早的浏览器都只支持事件,冒泡,不支持事件捕获
注意:事件要加 on
*/
三、事件对象
事件对象 event
DOM中的事件对象
- type: 获取事件类型
- target:事件目标
- stopPropagation() 阻止事件冒泡
- preventDefault() 阻止事件的默认行为
IE中的事件对象
- type: 获取事件类型
- srcElement:事件目标
- cancelBubble = true 阻止事件冒泡
- returnValue = false 阻止事件的默认行为
四、实现跨浏览器的事件处理程序(IE下和非IE下的浏览器)
这里我用对象,封装了一个跨浏览器 DOM事件处理方法的工具类 ,话不多说直接上源码 event.js , 如果我们写原生的js操作DOM元素时,对于事件处理和对象处理可以使用
/*
跨浏览器 DOM事件处理方法
*/
//调用例如:
//添加点击事件:eventUtil.addEvent(btn,'click',function)
//删除点击事件:eventUtil.removeEventListener(btn,'click',function)
//阻止事件冒泡:eventUtil.stopPropagation(e) e 来自于 event|window.event
var eventUtil={
// 添加事件
addEvent:function(element,type,fn){
// 是否是IE事件 还是普通事件
if(element.addEventListener){
element.addEventListener(type,fn,false);
}
else if(element.attachEvent){
element.attachEvent('on'+type,fn);
}
else{
element['on'+type] = fn;
}
},
// 删除事件
removeEvent:function(element,type,fn){
// 是否是IE事件 还是普通事件
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,fn);
}
else{
element['on'+type] = null;
}
},
//IE8下的event 是 window.event
getEvent:function(event){
return event?event:window.event;
//等同 return event | window.event
},
//获取事件类型
getType:function(event){
return event.type;
},
//获取事件来自于的目标元素
getElement:function(event){
return event.target || event.srcElement;
},
//阻止事件默认行为 例如a标签转跳
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
}
以上就是自己对DOM学习中事件处理和对象处理的总结,希望写篇博文记录下自己的积累。
咳咳,还是那句话
还是要不断学习,因为你还很年轻