Js_Dom(5)__Dom基础<事件event>
鼠标事件
1.事件
onclick 单击对象(按下松开)
ondblclick 双击对象
onmousedown 在对象上按下时
onmouseup 按下,在对象上松开时
onmousemove 鼠标在对象上移动时
onwheel 鼠标滚动时
onmouseover 鼠标指针穿过被选元素或其子元素区域
onmouseout 鼠标指针离开被选元素或者子元素区域
onmouseenter 鼠标指针穿过被选元素区域
onmouseleave 鼠标指针离开被选元素区域
mouseenter事件在鼠标进入某个元素,或第一次进入这个元素的某个子元素时触发(冒泡)。一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mouseenter事件。即:一旦进入,在子元素间的mouseenter不算是在本元素上的mouseenter。
而mouseover事件是必然冒泡的,一旦子元素mouseover了,本元素必然mouseover(除非子元素上禁止冒泡了)
<script>
window.onload=function(){
function fn(){
document.getElementById('p1').innerHTML+='+1'
}
var d=document.getElementById('pp').onmouseover=fn;
function fm(){
document.getElementById('p2').innerHTML+='+1'
}
var d=document.getElementById('qq').onmouseover=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’).onclick=function(){alert(1)}
document.getElementById(‘two’).onclick=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,阻止事件冒泡