eventDom

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了eventDom相关的知识,希望对你有一定的参考价值。

event、Dom

事件处理方法:事件流

事件流分为两种:事件冒泡(从里到外);事件捕获(从外到里)。

IE:只存在事件冒泡

DOM浏览器(现代浏览器,包括chrome、firefix等):存在两种事件流,默认事件冒泡。

DOM 0最早版本,也是DOM规范,兼容所有浏览器;缺点:不能同时添加多个事件,如果写在行内,会污染全局。

DOM 2优点:可以累加事件;缺点:要做兼容处理。

DOM 2累加且做兼容示例:

if(document.addEventListener){
p1.addEventListener("click",function(e){//DOM浏览器 
alert("hello");
},true);//true可选值,代表是冒泡事件
p1.addEventListener("click",function(e){
alert("hi");
}.true);
}else{
p1.attachEvent("onclick",function(e){//IE浏览器
alert("hello");
});
p1.attachEvent("onclick",function(e){
alert("hi");
});
 }

event 事件对象

获取事件信息。

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。//对于浏览器页面

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。

screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。//相对于屏幕

screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。

阻止DOM2事件冒泡:// DOM浏览器

e.stopPropagation();

阻止IE事件冒泡:

e.cancelBubble=true;

阻止默认事件://DOM浏览器

e.preventDefault();

阻止IE默认事件(同样阻止任何事件的发生):

e.returnValue=false;

节点

获取节点:

var attrs=d1.attributes;

访问节点:

attrs[‘id‘]//访问元素节点id属性或访问id属性节点
d1.id;
d1.gerAttrbute(‘id‘);

IE在table的td/tr,以及select的option不支持innerhtml

var sheets=document.styleSheets(获取内外所有样式表)

IE\DOM sheets[0].rule[0].style.height;//调用内部样式表的第一个的height

DOM sheets[0].cssRule[0].style.height;

最终样式表(只能获取,不能设置)

IE:d2.currentStyle.height;

DOM:window.get computedStyle(d2,null).height;

以上是关于eventDom的主要内容,如果未能解决你的问题,请参考以下文章