鼠标事件
1.事件
onclick 单击对象(按下松开)
ondblclick 双击对象
onmousedown 在对象上按下时
onmouseup 按下,在对象上松开时
onmousemove 鼠标在对象上移动时
onwheel 鼠标滚动时
onmouseover 鼠标指针穿过被选元素或其子元素区域
onmouseout 鼠标指针离开被选元素或者子元素区域
onmouseenter 鼠标指针穿过被选元素区域
onmouseleave 鼠标指针离开被选元素区域
mouseenter事件在鼠标进入某个元素，或第一次进入这个元素的某个子元素时触发(冒泡)。一旦触发后，在mouseleave之前，鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mouseenter事件。即：一旦进入，在子元素间的mouseenter不算是在本元素上的mouseenter。
而mouseover事件是必然冒泡的，一旦子元素mouseover了，本元素必然mouseover（除非子元素上禁止冒泡了）
<script>
window.οnlοad=function(){
function fn(){
document.getElementById('p1').innerHTML+='+1'
}
var d=document.getElementById('pp').οnmοuseοver=fn;
function fm(){
document.getElementById('p2').innerHTML+='+1'
}
var d=document.getElementById('qq').οnmοuseοver=fm;
}
</script>
</head>
<body>
<p id="p1">0</p>
<p id="p2">0</p>
<div id="pp" style="background-color:#0F0;width:400px; height:400px;position: relative">
<p id="qq" style="background-color:red;width:200px; height:200px; position:absolute; top:300px">666</p>
</div>
</body>
2.参数
(事件会返回一个事件对象,这个对象的属性包含了事件触发时的一些信息)
altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey 鼠标事件发生时，是否按下windows键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素
screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
onwheel事件对象特有的属性:(deltaX：返回一个数值，表示滚轮的水平滚动量。deltaY：返回一个数值，表示滚轮的垂直滚动量。deltaZ：返回一个数值，表示滚轮的Z轴滚动量。deltaMode：返回一个数值，表示滚动的单位,0表示像素，1表示行，2表示页)
键盘事件
1.事件
onkeypress 键盘按键被按下并松开。
onkeydown 键盘按键被按下。
onkeyup 键盘按键被松开。
2.参数
altKey，ctrlKey，metaKey，shiftKey返回一个布尔值，表示是否按下对应的键
key属性返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified
焦点事件
onfocus事件：节点获得焦点后触发
onblur事件：节点失去焦点后触发
onfocusin事件：节点将要获得焦点时触发，发生在focus事件之前
onfocusout事件：节点将要失去焦点时触发，发生在blur事件之前
表单事件
onfocus 元素获取焦点时
onblur 失去焦点时
onfocusin 元素即将获取焦点时
onfocusout 元素即将失去焦点时
oninput 元素获取用户输入时(输入时及时调用事件函数)
onchange 表单元素的内容改变时(输入时不及时调用事件函数)
onreset 表单重置时
onsubmit 表单提交时
图片加载事件
onload 图像完成加载
onabort 图像的加载被中断
onerror 在加载图像时发生错误
冒泡
<div id='one' style="height:400px; background-color:red"><div id='two' style="height:200px; background-color:blue">666</div>
</div>
<script>
document.getElementById(‘one’).οnclick=function(){alert(1)}
document.getElementById(‘two’).οnclick=function(){alert(2)}
</script>
1、事件捕获
事件从最不精确的对象开始触发，然后到最精确的对象
2、事件冒泡
事件按照从最特定的事件目标到最不特定的事件对象的顺序触发。
3.解析图
4.事件绑定
element.addEventlistener(event,fuction,BOOL)//document.getElementById(‘div’).addEventlistener(‘click’,function(){})
参数:
①前面学的事件去掉前缀on
②事件触发函数
③缺省默认为false:false冒泡阶段触发, true捕获阶段触发
5.事件绑定老方法
element.attachEvent（event,fuction）
//这个方法没有第三个参数
6.阻止事件冒泡(事件触发函数里调用)
①e.stopPropagation()//IE8以上的版本和现代浏览器
支持该方法的浏览器中也可以用stopImmediatePropagation()方法，这个不仅会阻止事件向祖元素的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低)
//同一对象绑定两次onclick,第二个加这个方法:两个处理函数都会执行
//同一对象绑定两次onclick,第一个加这个方法:第二个处理函数不会执行
②在IE8以及IE以下的浏览器中通过e.cancleBubble=true,阻止事件冒泡
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
