一、JavaScript事件
1、Javascript事件分类
鼠标事件，通过鼠标和网页进行交互
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
mousemove() 鼠标移动事件
mousedown() 鼠标按下事件
mouseup() 鼠标按键被松开事件
scroll 滚动事件（body）
键盘事件，通过键盘上的按键和网页进行交互
keydown 按键被按下
keyup 按键抬起
表单事件，提交表单时
submit 表单提交事件
select 文本框的文本被选中
focus 获得焦点事件
blur 失去焦点事件
change 内容改变事件
页面加载完毕事件：
load
2、Javascript事件监听
我们需要先监视网页上用户的这些行为，这样，当行为发生的时候，我们才能提供相应的处理方法，如果不监视，就无法获得用户的这些行为
HTML事件监听程序：
将监视器（摄像头），绑定到html的标签部分，作为html标签的属性
DOM0级事件监听程序：
将事件监听器（摄像头），绑定到DOM节点对象上，也就是作为DOM对象的属性存在
DOM2级事件监听程序
通过DOM对象.addEventListener()，针对主流浏览器（ie9+ Chrome、Firefox登录），非主流浏览器（IE6、7、8）使用attachEvent方法进行绑定
通常在使用DOM3级事件绑定程序的时候，先判断一下是否是主流浏览器
3、事件对象
疑问：当mousedown这个行为发生的时候，获得是左击，还是右击？
答：通过事件对象的button属性获得是左击、还是右击
button属性的值是0表示左击、1表示按下的是滑轮、2表示右击
事件对象又是怎么获得的？
JavaScript里面的事件对象：event，当用户的行为发生时，自动产生的对象，并且会自动给你传递到事件的处理程序中去，通常如果需要你接收一下，如果不需要就不用接收
通过事件对象，通常是用来获得当事件（用户的行为）发生时，事件主题的一些信息（左击、还是右击；鼠标的坐标等）
事件对象一下应用场景：
鼠标移动的行为：mousemove
通常会在鼠标移动行为发生时，获得鼠标的实时的坐标
通过clientX、clientY、pageX、pageY这些属性获得鼠标的坐标
唯一的区别，在于当出现滚动条的时候，计算方式不一样：
clientX、clientY：距离客户端的XY轴的距离，没有计算出现滚动条之后，卷去的距离
pageX、pageY：距离页面顶部、左边的距离，包含滚动条卷去的高度
鼠标滚动的行为：scroll
说明：由于鼠标滚动的时候，控制的是body整体滚动，所以这个行为监视的是body，通过document.body.scrollTop获得、设置滚动条距离顶部的高度
键盘事件：
用户通过键盘的按键和网页进行交互的行为
keydown：键盘按键被按下的行为，通常该行为发生的时候，我们可以通过事件对象的keyCode属性获得按下的是哪个按键
因为JavaScript的设计者给每个键盘的按键都分配了一个acsii码，通过事件对象的keyCode属性获得
注意：
有3个特殊的按键：ctrl、alt、shift
如何判断用户是否按下ctrl键了，通过事件对象的ctrlKey属性获得，只有按下ctrl键的时候，ctrlKey属性的才为true；altKey、shiftKey一样，只有按下这两个键的时候，值才为true
keyup，键盘抬起事件
通常是用来表示输入完毕（刚刚写的文字写完了），验证内容、或者发射子弹的时候，可以通过keyup事件监视
4、时间捕获与事件冒泡
（1） 事件捕获的效果：
会先执行父节点身上的事件，在执行自己身上的事件
（2）演示事件冒泡（非捕获）
非捕获、事件冒泡，会先执行自己身上的事件，然后在冒出去，执行父节点身上的事件
阻止：
主流浏览器通过：事件对象的stopPropogation()阻止，
非主流浏览器通过：事件对象的cancelBubble = true阻止
二、Javascript中位置相关函数
1、设置位置
margin、padding
说明：很少通过JavaScript操作margin、padding来实现位置的的变化
因为margin、padding之后，会影响到原来的布局
left、top
说明：该属性需要配合定位布局使用，和定位布局对应的是流式布局
2、 读取位置
offsetLeft：获得元素距离父元素左边的距离
offsetTop：获得元素距离父元素顶部的距离
这两个属性和定位布局相关
3、宽度、高度
获取元素的宽度、高度，要是设置宽度、高度，通过style.width|height
offsetWidth：获得宽度（包括边框）
offsetHeight：获得高度（包括边框）
clientWidth：获得宽度（不包括边框）
clientHeight：获得高度（不包括边框）
4、 滚动条距离
scrollTop：
scrollLeft：
说明：读取、设置滚动条都是通过上面的属性，由于滚动条控制的就是body整体
浙公网安备 33010602011771号