dom操作css事件

DOM操作CSS

通过JS去修改元素的样式，语法：元素.style.样式名 = 样式值，样式值是一个字符串
如果样式名中含有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法。

注意：
1、通过style属性设置的样式都是内联样式，而内联样式具有较高的优先级，修改后立即执行。
2、但是如果在样式中写了 ！important，则此时样式会有最高的优先级，即时通过JS也不能覆盖该样式，此时将导致JS修改样式失效，所以尽量不要写。
3、通过style属性读取的也是内联样式，无法读取样式表中的样式

获取当前元素正在显示的样式：语法：元素.currentStyle.样式名。但是只有IE浏览器可以使用

若想要在其他浏览器也可以读取，可以使用getComputedStyle() 来获取当前元素样式。它是window的方法，可直接使用，其接收两个参数，第一个是获取样式的元素，第二个是伪元素，一般传null。该方法返回一个对象，对象中封装了当前元素所有对应的样式。如果获取的样式没有设置，则会获取到真实的值而不是默认值。如width不会获得auto，而是一个长度

alert(getComputedStyle(box1,null).width);

通过currentStyle()和getComputedStyle()读取到的样式只能读取不能修改

其他样式相关的属性

1、clientWidth、clientHeight
这两个属性可以获取元素的可见高度和宽度，这些属性都是不带px的，可以直接进行计算，包括内容区和内边距。这些属性都是只读的，不能修改。

2、offsetWidth、offsetHeight
返回元素整个的高度、宽度，包括内容区、内边距、边框，这些属性都是不带px的，可以直接进行计算

3、offsetParent
可以用来获取当前元素的定位父元素。会获取到离当前元素最近的开启了定位的祖先元素（只要不是static默认值），如果所有的祖先元素都没有开启定位，则返回body

4、offsetLeft、offsetTop
当前元素相对于其定位父元素的水平偏移量
当前元素相对于其定位父元素的垂直偏移量

5、scrollHeight、scrollWidth
可以获取元素整个滚动区域的高度、宽度

6、scrollLeft、scrollTop
获取水平滚动条的滚动距离
获取垂直滚动条的滚动距离

注意：当scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了；水平同理

当为表单项添加disabled=“disabled” 则表单项将变成不可用的状态了。可为其设置true或者false来表示disabled是否禁用。

当为滚动条绑定响应函数时，需使用其onscroll属性。

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件的一切信息，比如，鼠标坐标 键盘哪个按键按下 鼠标滚轮滚动的方向等等。
但是在IE8及以下的浏览器中，响应函数被触发时，浏览器不会传递事件对象，其将事件对象作为window对象的属性保存的

if(!event){
	event = window.event;
	};
var  x = event.clientX;  //event = event || window.event

1、clientX、clientY
获取鼠标指针在当前可见窗口的水平、垂直坐标

areaDiv.onmousemove = function(event){
	alert(event.clientX);
	};

注意：当对象移动时，一定要开启元素的绝对定位。

2、pageX、pageY
获取鼠标指针相对于整个页面的水平、垂直坐标
或者将滚动条的长度加上clientY即可

事件冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

在开发中，大部分冒泡都是有用的。如果不希望冒泡，可以通过事件对象来取消冒泡。可以将事件对象的cancelBubble属性设置为true

事件委任

指将事件绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。利用冒泡，通过委派可以减少事件绑定的次数，从而提高程序的性能。

事件对象的target属性可以获取触发响应函数的元素

事件绑定

使用对象.事件 = 函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，后边的会覆盖掉之前的。

addEventListener()也可以为元素绑定响应函数。参数：1、事件的字符串，不要on。2、回调函数，事件触发函数调用。3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false

上述方法可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行。

IE8浏览器及以下，使用attachEvent()，参数：1、事件的字符串，要on 2、回调函数。不同的是后绑定先执行，但是一般不需要处理，因为既然分开写，顺序也不会那么重要。

注意：addEventListener中的this是绑定事件的对象，而attachEvent中的this则是window。

事件传播

W3C综合了两个公司的方案，将事件传播分成了三个阶段：
1、捕获阶段：在此阶段从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2、目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3、冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素的事件

注意：如果想在捕获阶段就执行，可以将addEventListener中的参数false改为true。一般不会用。且IE8以下的浏览器中没有捕获阶段。