JavaScript 14

js动画（下）

style.width    样式宽

clientWidth      可视区宽    样式宽+padding

offsetWidth      占位宽        样式宽+padding+border  （可视区宽+边框）

scrollHeight：获取对象的滚动高度。

scrollWidth：获取对象的滚动宽度

scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

事件驱动

1.事件

JavaScript侦测到的用户的操作或是页面的一些行为(怎么发生的）

2.事件源

引发事件的元素。(发生在谁的身上)

3.事件处理程序

对事件处理的程序或是函数 (发生了什么事)

事件绑定

1.一般绑定事件t

在脚本中绑定

直接在HTML元素绑定

2.同一个事件绑定多个事件处理程序

IE:

对象.attachEvent("事件(on)","处理程序") 添加

对象. detachEvent("事件(on)","处理程序") 删除

FF:

对象.addEventListener("事件","处理程序",布尔值) 添加

对象.removeEventListener("事件","处理程序",布尔值) 删除

事件对象

一、什么是事件对象

用来记录一些事件发生时的相关的信息的对象

1.只有当事件发生的时候才产生，只能在处理函数内部访问

2.处理函数运行结束后自动销毁。

二、如何获取事件对象

IE：window.event

FF: 对象.on事件=function (e){}

事件对象的属性

1.关于鼠标事件

相对于浏览器位置的

clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置

clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置

相对于屏幕位置的

screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置

screenY

相对于事件源的位置

IE:

offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置

offsetY

FF:

layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置

layerY

2.关于键盘事件

keyCode 获得键盘码

空格:32 回车13 左上右下：37 38 39 40

altKey 判断alt键是否被按下 按下是true 反 之是false 布尔值

ctrlKey

shiftKey

type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程

序的时候

事件流

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。

事件流的分类

1. 冒泡型事件(所有的浏览器都支持)

由明确的事件源到最不确定的事件源依次向上触发。

2. 捕获型事件(IE不支持 w3c标准 火狐)

不确定的事件源到明确的事件源一次向下触发。

addEventListener(事件，处理函数，false)

addEventListener(事件，处理函数，true)

阻止事件流(事件对象)

IE: 事件对象.cancelBubble=true;

FF: 事件对象.stopPropagation();

获得目标事件源的对象

IE： 事件对象.srcElement

FF: 事件对象阻止浏览器默认行为

if (ev.preventDefault )

ev.preventDefault(); //阻止默认浏览器动作(W3C)

else

ev.returnValue = false;//IE中阻止函数器默认动作的方式