JavaScript基础之事件
事件
1.什么是事件对象,事件对象兼容性写法。
2.document的本质。
3.什么是事件冒泡,取消事件冒泡。
4.事件对象属性:oEvent.cancelBubble、oEvent.keyCode。
5.理解clientX、clientY、offsetWidth…、scrollTop等。
6.鼠标事件(onclick、onmousedown、onmouseup、onmousemove)。
7.键盘事件(keyCode、onpress、onkeyup、onkeydown、ctrl…)。
8.事件的默认行为
9.拖拽原理,window.onload、window.onresize、window.onscroll。
10. 限制拖拽范围的条件:document.documentElement.clientWidth
document.onclick、document.onmousemove
事件对象:用来获取事件的详细信息。event (包含事件的各种信息)
document.body.onclick {可视,一般没内容body撑不起来}
document.onclick
document 是什么? —— 网页
其实是一个节点, 第一个子节点是!,第二个子节点是HTML, 所以document是
<!>和<html>的父级,是一个最顶层的虚拟的父节点
<document>
<!>
<html>
所以给document加事件不用window.onload,但是给body加事件就需要
window.onload
事件对象的写法:
事件对象——————event (包含事件的各种信息 如:event.clientX
event.clientY)
event是IE下的写法
火狐下事件处理函数是可以传参的,名字可以随便取,传的参数就是系统传的
事件对象。——object MouseEvent 鼠标事件对象
var oEvent=ev||event;
事件流 事件冒泡
大部分情况下事件冒泡会给我们带来困扰,
百度例子;点其他地方菜单收缩
oEvent.cancelBubble=true ; cancelBubble是一个属性,赋值true就行。
onmousemove事件
给document加事件 document.mousemove
clientX、clientY 是鼠标的可视区坐标。
滚动距离:scrollTop 可视区到页面顶部的距离。滚动条滚动的距离
document.dcumentElement.scrollTop (IE FF 非chrome)
document.body.scrollTop (chrome)
var scrollTop=document.dcumentElement.scrollTop || document.body.scrollTop
var scrollLeft=document.dcumentElement.scrollLeft || document.body.scrollLeft
oDiv.style.left=oEvent.clientX+scrollLeft+'px';
会闪就用运动。BOM解决
只要遇到clientX、clientY就一定要加滚动条,否则潜在有兼容性问题。
获取鼠标在页面的绝对位置
封装函数
例子2:一串跟随鼠标的Div
键盘事件
keycode (只有)
鼠标事件 :onclick= onmousdown + onmouseup
键盘事件:onpress= onkeydown + onkeyup
事件对象的一个属性:keyCode 键值 键码
oEvent.keycode
offsetwidth 标签宽度,包括边框,内边距。
offsetWidth offsetHeight offsetLeft offsetTop 实际的宽度、高度、左边
距、上边距(left+marign)