eventDom

Posted 2020-07-17

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;