js相关笔记（十七）
1.client对象：可视区域对象
◆box.clientWidth：表示盒子的宽度加padding
◆box.clientHeight：表示盒子的高度加padding
◆box.clientTop:表示盒子上边的border大小
◆box.clientLeft:表示盒子左边的border大小
2.offset与scroll和client他们的width、height、top、left的区别
◆offsetWidth和offsetHeight代表着盒子的宽高（如果盒子定义的了宽高，就以定义的宽高为主，如果盒子没有定义宽高就以盒子内容为主）加上padding+border。
◆scrollWidth和scrollHeight代表着盒子的内容的宽高（如果内容的宽高小于盒子定义的宽高，那么就以盒子定义的宽高为主，如果盒子的内容宽高大于盒子定义一个宽高，那么久以盒子的内容的宽高为主）+padding。
◆clientWidth和clientHeight代表着盒子的宽高(就算内容超过盒子，它也只获取盒子定义的宽高，如果盒子没有定义宽高，那么就获取内容的宽高)+padding。
♦offsetTop和offsetLeft代表着距离最近的父系盒子带有定位的盒子之间的距离，也就是带有定位的盒子与盒子之间的上边的距离和左边的距离，如果父系盒子中没有定位的盒子，那么就取当前盒子距离浏览器（0,0）坐标点的距离。
♦scrollTop和scrollLeft代表着被卷去的距离，除了document之外其它盒子也能用，但是盒子必须要有滚动条，但是自己模拟的滚动条不行，只能使用css样式overflow:scroll;弄出来的滚动条才行。
♦clientTop和clientLeft代表着clientWidth和clientHeight不包括的上border和左border，而且只能够获取到上边的border和左边的border。
3.使用client对象检测浏览器的宽度和高度（可视区域），也就是当你放大缩小时宽度高度就会发生变化，因为可视区域也发生了变化，检测的方式与获取scollLeft和scrollTop类似
◆无论有没有DTD，在IE9及其以上的版本的浏览器和一些主流浏览器可以使用window.innerWidth和window.innerHeight来检测并获取当前浏览器可视区域的宽高，在IE9以下时，获取的值都是undefined。
◆当有DTD时，可以使用document.documentElement.clientWidth和document.documentElement.clientHeight来检测并获取当前任何版本浏览器可视区域的宽高，如果没有DTD时用这个只能够正常检测IE任何版本的浏览器的可视区域的宽高。
◆当没有DTD时，可以使用document.body.clientWidth和document.body.clientHeight在IE9以上的浏览器及各个主流浏览器检测当前浏览器的可视区域的宽高，但是有DTD时无法正常检测任何版本的浏览器的可视区域的宽高。
★所以兼容性写法和scrollTop与scrollLeft有点不一样【
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
】,不能够正常检测的是指高度，高度无法正常检测，宽度时而能够正常检测时而不能够正常检测，所以这种兼容性写法，可能在一些老的浏览器中还是会出现问题，但是这个已经是最好的兼容性写法了。
4.window.onresize事件是可视区域大小改变事件，只要浏览器可视区域发生1px的变化，都会触发window.onresize事件，就像window.onscroll事件一样，只要滚动条中的滑块儿移动1px，都会触发window.onscroll事件，注意：首次打开浏览器并不一定会触发window.onresize事件，只有当。
5.在工作中判断一个值是否等于true，不要写 obj==ture要写成true==obj，防止你少写了一个=号，导致obj=true变成了赋值，那么直接会进入if中，就算你的obj原来是false，这样就会可能会导致几百上千万条数据发生错误，如果这个问题在测试的时候发现了，那就算了，如果在上线的时候发现了，那么就会出现很大的损失了。
6.获取屏幕分辨率的高度和宽度可以window.screen.width和window.screen.height来获取。
7.事件冒泡：当一个元素上的事件被触发的时候，其所有父系容器如果定义了和这个元素被触发的事件时，那就会触发其所有父系容器的这个事件，比如鼠标点击了一个按钮，按钮设置了单击事件，按钮的父容器也设置了单击事件，那么你点击鼠标按钮时触发了单击事件，于此同时也会触发父容器的单击事件，元素开始不断的往上冒泡，一直冒泡到dom树的顶端，冒泡的原理：
★因为子容器在父容器中，你点击子容器的时候，其实也相当于点击了父容器的区域，所以就等于你先点击了子容器，然后你由点击了父容器的区域，于是乎当你给子容器和父容器都设置了单击事件时，先触发子容器的单击事件然后再触发父容器的单击事件，如果父容器的父容器也还设置了单击事件，那么就会一直往上触发单击事件。
8.事件传播阶段分三个：捕获阶段、冒泡阶段、目标阶段
◆事件捕获阶段：事件从最上一级标签开始往下查找，知道捕获到事件目标（target）为止。
◆事件冒泡阶段：事件从事件目标（target）开始往上冒泡直到页面的最上一级标签。
★使用捕获的方式执行事件可是使用对象.addListenerEvent("事件",fn,true);来实现，使用冒泡的方式执行事件可以使用对象.on事件=fn;来实现。
◆事件目标阶段：其实很像是在捕获阶段是从外往内的，将每一个事件push进一个数组中，冒泡阶段是从数组中pop出来，事件目标阶段，将pop出的事件的方法执行，整个过程很像是一个进栈出栈然后执行。
9.冒泡顺序：
◆IE6.0：div->body->html->document
◆其它浏览器：div->body->html->document->window
★这些事件不会冒泡也不能冒泡：
【
blur、focus、load、unload、onmouseenter、onmouseleave
】
10.判断一个事件默认冒不冒泡，使用event.bubbles，如果返回值为true则这个事件冒泡，反之这个事件不冒泡。在冒泡中找到最开始的第一个触发这个事件的对象，使用event.target，谁是第一个泡泡，target就指向谁，但是在IE678中使用了srcElement，所以就需要兼容性的写法，有两种，一种直接用 || 一种是用三元运算符，
◆ var obj=event.target||event.srcElement;
◆ var obj=event.target?event.target:event.srcElement;
11.取消事件冒泡的方式，在IE678里面使用 event.cancelBubble=ture;表示取消冒泡，但是在IE9及其以上的主流浏览器使用的是event.stopPropagation();表示停止传播，也就是停止向外冒泡，阻止冒泡的兼容性写法是【
obj.onmouseover=function(event){
//获取兼容性的事件对象
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();//停止冒泡
}else{
event.cancelBubble=true;//取消冒泡
}
}
】
12.利用事件冒泡和event.target可以减少很多不必要的事件的定义，通过判断事件源的第一个对象，就知道是谁最开始触发了这个事件，那么就可以在最大的那个父容器的事件里面做最直接的事情了，页面元素的事件其实一直都存在，只不过是内部的事件驱动程序没有写罢了，所以就算你没有给页面元素手动设置事件，也能够通过event.target来找到触发事件的第一个事件源对象。
13.js中的【事件委托】是通过事件冒泡来实现的，通过设置父容器的事件，当调用自己的事件时，在父容器那里去执行，从而，当子容器过多时减少了事件过多的定义，只需要定义一个父容器的事件即可，但是在父容器的事件中需要过滤，因为并不是所有的子元素都需要定义事件，所以可能需要在父容器中设置判断，判断当前触发的第一个事件源对象是否符合要求，如果符合的话就执行。
14.获取对象的属性值的两种方式，第一种是对象.属性名，第二种是对象["属性名"]，第二种非常的灵活，第一种比较准确。
15.获取行内式、内嵌式、外链式的css样式的方式
◆获取行内式：对象.style.属性名和对象.style["属性名"]，这种方式只能取行内的样式，这个style也是一个对象，它是页面标签中的style属性里的字符串转换成了json对象，如果你想获取页面标签中style属性的字符串，可以使用style.cssText来获取纯字符串。
◆获取内嵌式和外链式：对象.currentStyle.属性名和对象.currentStyle["属性名"]只能够在IE浏览器中使用，
window.getComputedStyle(对象,伪元素对象).属性名和window.getComputedStyle(对象,伪元素对象)["属性名"]可以在IE9及以上的等一些主流浏览器中使用，如果没有伪元素对象可以给这个方法的参数赋值null，获取行内式的方式只能够获取行内式，但是获取内嵌式与外链式的方式其实还可以获取行内式的样式。
★获取内嵌式与外链式的兼容性写法是【
if(window.getComputedStyle){
return window.getComputedStyle(element,null)["background-color"];
}else {
return element.currentStyle["background-color"];
}
】
16.无论是行内式的样式还是内嵌式外链式的样式，使用[]方括号的方式获取样式时，既可以使用驼峰命名法也可以使用-命名法，如
box.style.backgroundColor即可以写成box.style["backgroundColor"]也可以写成box.style["background-color"]这样，都行，但是如果使用对象.的方式只能够使用驼峰命名法。
17.通过元素和属性名获取样式的属性值【
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
】
，记住：当页面使用ctrl+鼠标滚轮进行发大缩小时，会造成获取getStyle(element, key)获取的值有小数的。
18.匀速动画计算步长：
【
element.speed =element.target > element.leader ? 10 : -10;】，
缓速动画计算步长：【
//获取步长
element.speed = (element.target- element.leader) / 10 || 0; //二次计算步长
element.speed = element.speed > 0 ?Math.ceil(element.speed) : Math.floor(element.speed);
】；
◆box.clientWidth：表示盒子的宽度加padding
◆box.clientHeight：表示盒子的高度加padding
◆box.clientTop:表示盒子上边的border大小
◆box.clientLeft:表示盒子左边的border大小
2.offset与scroll和client他们的width、height、top、left的区别
◆offsetWidth和offsetHeight代表着盒子的宽高（如果盒子定义的了宽高，就以定义的宽高为主，如果盒子没有定义宽高就以盒子内容为主）加上padding+border。
◆scrollWidth和scrollHeight代表着盒子的内容的宽高（如果内容的宽高小于盒子定义的宽高，那么就以盒子定义的宽高为主，如果盒子的内容宽高大于盒子定义一个宽高，那么久以盒子的内容的宽高为主）+padding。
◆clientWidth和clientHeight代表着盒子的宽高(就算内容超过盒子，它也只获取盒子定义的宽高，如果盒子没有定义宽高，那么就获取内容的宽高)+padding。
♦offsetTop和offsetLeft代表着距离最近的父系盒子带有定位的盒子之间的距离，也就是带有定位的盒子与盒子之间的上边的距离和左边的距离，如果父系盒子中没有定位的盒子，那么就取当前盒子距离浏览器（0,0）坐标点的距离。
♦scrollTop和scrollLeft代表着被卷去的距离，除了document之外其它盒子也能用，但是盒子必须要有滚动条，但是自己模拟的滚动条不行，只能使用css样式overflow:scroll;弄出来的滚动条才行。
♦clientTop和clientLeft代表着clientWidth和clientHeight不包括的上border和左border，而且只能够获取到上边的border和左边的border。
3.使用client对象检测浏览器的宽度和高度（可视区域），也就是当你放大缩小时宽度高度就会发生变化，因为可视区域也发生了变化，检测的方式与获取scollLeft和scrollTop类似
◆无论有没有DTD，在IE9及其以上的版本的浏览器和一些主流浏览器可以使用window.innerWidth和window.innerHeight来检测并获取当前浏览器可视区域的宽高，在IE9以下时，获取的值都是undefined。
◆当有DTD时，可以使用document.documentElement.clientWidth和document.documentElement.clientHeight来检测并获取当前任何版本浏览器可视区域的宽高，如果没有DTD时用这个只能够正常检测IE任何版本的浏览器的可视区域的宽高。
◆当没有DTD时，可以使用document.body.clientWidth和document.body.clientHeight在IE9以上的浏览器及各个主流浏览器检测当前浏览器的可视区域的宽高，但是有DTD时无法正常检测任何版本的浏览器的可视区域的宽高。
★所以兼容性写法和scrollTop与scrollLeft有点不一样【
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
】,不能够正常检测的是指高度，高度无法正常检测，宽度时而能够正常检测时而不能够正常检测，所以这种兼容性写法，可能在一些老的浏览器中还是会出现问题，但是这个已经是最好的兼容性写法了。
4.window.onresize事件是可视区域大小改变事件，只要浏览器可视区域发生1px的变化，都会触发window.onresize事件，就像window.onscroll事件一样，只要滚动条中的滑块儿移动1px，都会触发window.onscroll事件，注意：首次打开浏览器并不一定会触发window.onresize事件，只有当。
5.在工作中判断一个值是否等于true，不要写 obj==ture要写成true==obj，防止你少写了一个=号，导致obj=true变成了赋值，那么直接会进入if中，就算你的obj原来是false，这样就会可能会导致几百上千万条数据发生错误，如果这个问题在测试的时候发现了，那就算了，如果在上线的时候发现了，那么就会出现很大的损失了。
6.获取屏幕分辨率的高度和宽度可以window.screen.width和window.screen.height来获取。
7.事件冒泡：当一个元素上的事件被触发的时候，其所有父系容器如果定义了和这个元素被触发的事件时，那就会触发其所有父系容器的这个事件，比如鼠标点击了一个按钮，按钮设置了单击事件，按钮的父容器也设置了单击事件，那么你点击鼠标按钮时触发了单击事件，于此同时也会触发父容器的单击事件，元素开始不断的往上冒泡，一直冒泡到dom树的顶端，冒泡的原理：
★因为子容器在父容器中，你点击子容器的时候，其实也相当于点击了父容器的区域，所以就等于你先点击了子容器，然后你由点击了父容器的区域，于是乎当你给子容器和父容器都设置了单击事件时，先触发子容器的单击事件然后再触发父容器的单击事件，如果父容器的父容器也还设置了单击事件，那么就会一直往上触发单击事件。
8.事件传播阶段分三个：捕获阶段、冒泡阶段、目标阶段
◆事件捕获阶段：事件从最上一级标签开始往下查找，知道捕获到事件目标（target）为止。
◆事件冒泡阶段：事件从事件目标（target）开始往上冒泡直到页面的最上一级标签。
★使用捕获的方式执行事件可是使用对象.addListenerEvent("事件",fn,true);来实现，使用冒泡的方式执行事件可以使用对象.on事件=fn;来实现。
◆事件目标阶段：其实很像是在捕获阶段是从外往内的，将每一个事件push进一个数组中，冒泡阶段是从数组中pop出来，事件目标阶段，将pop出的事件的方法执行，整个过程很像是一个进栈出栈然后执行。
9.冒泡顺序：
◆IE6.0：div->body->html->document
◆其它浏览器：div->body->html->document->window
★这些事件不会冒泡也不能冒泡：
【
blur、focus、load、unload、onmouseenter、onmouseleave
】
10.判断一个事件默认冒不冒泡，使用event.bubbles，如果返回值为true则这个事件冒泡，反之这个事件不冒泡。在冒泡中找到最开始的第一个触发这个事件的对象，使用event.target，谁是第一个泡泡，target就指向谁，但是在IE678中使用了srcElement，所以就需要兼容性的写法，有两种，一种直接用 || 一种是用三元运算符，
◆ var obj=event.target||event.srcElement;
◆ var obj=event.target?event.target:event.srcElement;
11.取消事件冒泡的方式，在IE678里面使用 event.cancelBubble=ture;表示取消冒泡，但是在IE9及其以上的主流浏览器使用的是event.stopPropagation();表示停止传播，也就是停止向外冒泡，阻止冒泡的兼容性写法是【
obj.onmouseover=function(event){
//获取兼容性的事件对象
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();//停止冒泡
}else{
event.cancelBubble=true;//取消冒泡
}
}
】
12.利用事件冒泡和event.target可以减少很多不必要的事件的定义，通过判断事件源的第一个对象，就知道是谁最开始触发了这个事件，那么就可以在最大的那个父容器的事件里面做最直接的事情了，页面元素的事件其实一直都存在，只不过是内部的事件驱动程序没有写罢了，所以就算你没有给页面元素手动设置事件，也能够通过event.target来找到触发事件的第一个事件源对象。
13.js中的【事件委托】是通过事件冒泡来实现的，通过设置父容器的事件，当调用自己的事件时，在父容器那里去执行，从而，当子容器过多时减少了事件过多的定义，只需要定义一个父容器的事件即可，但是在父容器的事件中需要过滤，因为并不是所有的子元素都需要定义事件，所以可能需要在父容器中设置判断，判断当前触发的第一个事件源对象是否符合要求，如果符合的话就执行。
14.获取对象的属性值的两种方式，第一种是对象.属性名，第二种是对象["属性名"]，第二种非常的灵活，第一种比较准确。
15.获取行内式、内嵌式、外链式的css样式的方式
◆获取行内式：对象.style.属性名和对象.style["属性名"]，这种方式只能取行内的样式，这个style也是一个对象，它是页面标签中的style属性里的字符串转换成了json对象，如果你想获取页面标签中style属性的字符串，可以使用style.cssText来获取纯字符串。
◆获取内嵌式和外链式：对象.currentStyle.属性名和对象.currentStyle["属性名"]只能够在IE浏览器中使用，
window.getComputedStyle(对象,伪元素对象).属性名和window.getComputedStyle(对象,伪元素对象)["属性名"]可以在IE9及以上的等一些主流浏览器中使用，如果没有伪元素对象可以给这个方法的参数赋值null，获取行内式的方式只能够获取行内式，但是获取内嵌式与外链式的方式其实还可以获取行内式的样式。
★获取内嵌式与外链式的兼容性写法是【
if(window.getComputedStyle){
return window.getComputedStyle(element,null)["background-color"];
}else {
return element.currentStyle["background-color"];
}
】
16.无论是行内式的样式还是内嵌式外链式的样式，使用[]方括号的方式获取样式时，既可以使用驼峰命名法也可以使用-命名法，如
box.style.backgroundColor即可以写成box.style["backgroundColor"]也可以写成box.style["background-color"]这样，都行，但是如果使用对象.的方式只能够使用驼峰命名法。
17.通过元素和属性名获取样式的属性值【
/**
* 功能：获取该元素样式属性的属性值
* @param element
* @param attribute
* @returns {*}
*/
function getStyle(element, attribute) {
return element.currentStyle
?
element.currentStyle[attribute]
:
window.getComputedStyle(element, null)[attribute];
}
】
，记住：当页面使用ctrl+鼠标滚轮进行发大缩小时，会造成获取getStyle(element, key)获取的值有小数的。
18.匀速动画计算步长：
【
element.speed =element.target > element.leader ? 10 : -10;】，
缓速动画计算步长：【
//获取步长
element.speed = (element.target- element.leader) / 10 || 0; //二次计算步长
element.speed = element.speed > 0 ?Math.ceil(element.speed) : Math.floor(element.speed);
】；
