js高程 dom 和 dom 事件处理标志

dom

//  pc  js dom
document.getElementById("d1").style.cssText= "color:red; font-size:13px;";

w3c  dom2 事件

var btn2 = document.getElementById('btn2');
function handlers = function(){}
btn2.addEventListener('click',handlers,false);
btn2.removeEventListener('click',handlers.false);

ie 事件处理程序

 var btn3 = document.getElementById('btn3');
 var handlers2=function(){};
 btn3.attachEvent('onclick',handlers2);
 btn3.detachEvent('onclick',handlers2);

dom2 事件对象 event

currentTarget    只读    事件处理程序当前正在处理事件的那个元素
target            只读    事件的目标
type            只读    被触发的事件的类型
stopPropagation() 取消事件冒泡
preventDefault()      阻止默认

 ie 事件  event

srcElement        只读    事件的目标（与DOM中target属性相同）
type            只读    被触发的事件的类型
cancelBubble    读/写    默认值为false，设置为true可以取消事件冒泡（与DOM中stopPropagation()一样）
returnValue        读/写    默认为true，设置为false，就可以阻止默认行为。（与DOM中的preventDefault()一样）

 

function handler(e){
			e = e || window.event;
			(e)?e.cancelBubble =true : e.stopPropagation();//阻止了冒泡
			(e.returnValue == true)?e.returnValue =false :e.prentDefault(); //阻止a标签的默认跳转事件
			console.log(e.target.innerHTML);//元素对象对象常用属性
			console.log(e.target.innerText);//元素对象对象常用属性
			console.log(e.target.value);//元素对象s对象常用属性  默认值为 0
			console.log(e.x+":"+e.y);//event事件对象常用属性:鼠标点击位置坐标（x,y） --IE
			console.log(e.pageX+":"+e.pageY);//event事件对象常用属性:距屏幕left的距离/距屏幕top距离  --IE8+
			console.log(e.clientX+":"+e.clientY);//event事件对象常用属性:鼠标点击位置坐标（x,y）
			console.log(e.screenX+":"+e.screenY);//event事件对象常用属性:距屏幕left的距离/距屏幕top距离
			console.log(e.srcElement);//event事件对象常用属性: [object HTMLLIElement]  触发该事件的元素对象
			console.log(e.target);//event事件对象常用属性: [object HTMLLIElement]  触发该事件的元素对象
			console.log(e.cancelBubble);
			console.log(e.returnValue);
		}

   偏移量（元素在屏幕上占用的所有可见的空间）

        offsetHeight：元素在垂直方向上占用的大小，以像素计。包括元素的高度，（可见的）水平滚动条的高度、上边框的高度和下边框的高度。
        offsetWidth:元素在水平方向上占用的空间大小，包括元素的宽度，（可见的）垂直滚动条宽度，左边框宽度和右边框宽度。
        offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
        offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

function handler(e){
			e = e || window.event;
			(e)?e.cancelBubble =true : e.stopPropagation();//阻止了冒泡
			(e.returnValue == true)?e.returnValue =false :e.prentDefault(); //阻止a标签的默认跳转事件
			console.log(e.target);//元素对象对象常用属性
			console.log(e.target.offsetHeight);//元素对象对象常用属性
			console.log(e.target.offsetWidth);//元素对象对象常用属性
			console.log(e.target.offsetLeft);//元素对象对象常用属性
			console.log(e.target.offsetTop);//元素对象对象常用属性
		}

 客户区大小(指的是元素内容及其内边距所占空间大小)

        clientWidth元素内容区宽度加上左右内边距宽度  

        clientHeight元素内容区高度加上上下内边距高度。滚动条占用的空间不计算在内。
      

function handler(e){
			e = e || window.event;
			(e)?e.cancelBubble =true : e.stopPropagation();//阻止了冒泡
			(e.returnValue == true)?e.returnValue =false :e.prentDefault(); //阻止a标签的默认跳转事件
			console.log(e.target);//元素对象对象常用属性
			console.log(e.target.clientHeight);//元素对象对象常用属性
			console.log(e.target.clientWidth);//元素对象对象常用属性
			console.log(e.target.clientLeft);//元素对象对象常用属性
			console.log(e.target.clientTop);//元素对象对象常用属性
		}

 

 滚动大小

       scrollHeight:在没有滚动条的情况下，元素内容的总高度。
        scrollWidth:在没有滚动条的情况下，元素内容的总宽度。
        scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
        scrollTop:被隐藏在内容区域上方的像素数。同过设置这个属性可以改变元素的滚动位置。 

function handler(e){
			e = e || window.event;
			(e)?e.cancelBubble =true : e.stopPropagation();//阻止了冒泡
			(e.returnValue == true)?e.returnValue =false :e.prentDefault(); //阻止a标签的默认跳转事件
			console.log(e.target);//元素对象对象常用属性
			console.log(e.target.scrollHeight);//元素对象对象常用属性
			console.log(e.target.scrollWidth);//元素对象对象常用属性
			console.log(e.target.scrollLeft);//元素对象对象常用属性
			console.log(e.target.scrollTop);//元素对象对象常用属性
		}