悟透javascript笔记

[wuzinong]

http://www.qdfuns.com/notes/13600/e5f7a6832b6d3a605ca84b2b51924db9.html

一：一些W3C和微软模型不同的地方
1.绑定事件监听函数：
微软模型不支持事件捕获
微软的模型把事件处理函数视为一个全局函数，而不是(该事件处理函数)被注册到的HTML元素的一个方法

x.addEventListener("click",funcName,false);//w3c标准，true代表在捕获阶段触发，flase代表在冒泡阶段触发
x.attachEvent("onclick",funcName);//微软标准
//分别对应的移除事件
x.removeEventListener("click",funcName,false);
x.detachEvent("onclick",funcName);

2.阻止事件冒泡与捕获
evt.stopPropagation();//w3c
evt.cancelBubble = true;//微软

3.关于事件对象和它的属性
1)w3c标准把书籍对象作为第一个参数被传递到当前事件的处理程序中
在微软模型中，书籍对象总是window.event

3.关于事件对象和它的属性
1)w3c标准把书籍对象作为第一个参数被传递到当前事件的处理程序中
在微软模型中，书籍对象总是window.event

2)对于event对象的目标属性：
w3c中定义的是：currentTarget,relatedTarget及target
微软的属性是：fromElement,toElement及toElement
4.鼠标的位置
一共有6对鼠标坐标属性。全部由一个X和一个Y组成，它们给出鼠标坐标的像素值。
一个负数的X意味着实在参考点的左边；一个负数的Y意味着在参考点上面

属性对 参考点 浏览器兼容性
clientX,clientY 浏览器 所有，除了Safari
layerX,layerY 最近的绝对定位的父节点，如果没有，则为document Mozilla和Safari
offsetX,offsetY 事件目标对象 所有，除了Mozilla
pageX,pageY document对象 所有浏览器，除了Explorer
screenX,screenY 计算机屏幕 所有浏览器
x,y 难以辨识 全部不兼容，mozilla不支持

取得鼠标相对于document的位置：
var posx =0;
var posy =0;
var evt = e || window.event;
if(evt.pageX || evt.pageY){
posx = evt.pageX;
posy = evt.pageY;
}
else if(evt.clientX || evt.clientY){
posx = evt.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;

posy = evt.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

5.鼠标按键
可以在button属性中找到用户按了哪个师表按键这个信息,如果要设置禁用鼠标右键只要设置button属性return false就可以了
一下是w3c及微软对鼠标按键的表示：

Model Left button Middle button Right button
w3c 0 1 2
微软 1 4 2
微软使用的是位掩码，允许你同时探测多个按键，比如用户同时按下了左右键,button就变成1+2=3;
(不得不说微软这个做的还是很好地，位掩码其实就是一种二进制位相加的操作，比如1的二进制表示
是01,2的二进制位表示是10，通过或操作：01 || 10 =》 11 即十进制的3，由此判断同时按下了)

6.目标对象
w3c兼容的浏览器将其命名为target，而 Explorer则命名为srcElement
//可以这样解决
function handleEvent(e){
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
if(evtTarget.nodeType == 3){
eventTarget = evtTarget.parentNode;//此处由于safari旧版本中把Text文本本身也作为事件目标对象，这里过滤nodeType=3即文本节点，并取其父节点
}
}

7.获取浏览器尺

document.documentElement.clientWidth;//其他浏览器
document.body.clientWidth;//针对IE6之前的版本

二：元素的尺寸和位置 尺寸：
1.clientWidth和clientHeight属性给出元素的可视部分的宽度和高度(css的width+padding)它们不把边框和滚动条计算在内，也不包括任何可能的滚动
2.offsetWidth和offsetHeight给出 元素在页面中占据的宽度和高度的总计。它们和前一对属性的区别在于它们把元素的边框和滚动条计算在内
3.scrollWidth和scrollHeight属性该出了设置了overflow:visible的元素总的宽度和高度。如果这个宽度和高度大于clientWidth和clientHeight，该元素就需要滚动条
4.scrollTop和scrollLeft属性给出元素预计滚动的距离(像素值)。当你设置这些属性的时候，页面滚动到新的坐标

位置：
offsetLeft和offsetTop给出了元素偏移量的像素值，但是偏移相对的是哪个元素，各个浏览器对此的处理完全不一致。
但是，可以通过offsetParent属性来计算相对位移的元素(其中也有一个缺陷:body和html元素没有offsetParent,
所以也就没有offsetWidth/Height，如果给它们中的任意一元素设置margin或padding，这个值将不能添加到偏移量计算中)

function findPos(obj){
var curleft = curtop = 0;
if(obj.offsetParent){
while(obj.offsetParent){
curleft +=obj.offsetLeft;
curtop +=obj.offsetTop;
obj = obj.offsetParent;
}
}
return [curleft,curtop];
}