另一种事件捕获:(仅对IE 有用)
div.setCapture(); div.releaseCapture();
将页面中所有的事件揽在自己身上
鼠标事件:
click,mousedown,mousemove,mouseup
(移动端:touchstart,touchmove,touchend)
click=mousedown+mouseup
<div style="background-color: red;width: 50px;height: 50px;"></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
div.onclick=function(){
console.log("click");
}
div.onmousedown=function(){
console.log("mousedown");
}
div.onmouseup=function(){
console.log("mouseup");
}
</script>
我们点击方框 在控制台上依次的显示如下
contextmenu (右键产生菜单)
mouseover / mouseenter(鼠标盖住 闯进你的区域)
mouseout / mouseleave(鼠标离开你的区域)
区分左右键:
mouseup mousedown判断鼠标键 click只能监听左键
event.button(左键0 右键2 滚动轮1)
这段代码可以监听 div 的左右键及滚动轮的点击事件并显示:
div.onmouseup=function(e){
if(e.button==0)
console.log("left");
else if(e.button==2)
console.log("right");
else if(e.button==1)
console.log("middle");
}
键盘事件:
keydown,keyup,keypress
keydown > keypress > keyup
keydown 和 keypress 的区别
- keydown 可以响应任意键盘的按键(每一个witch 对应一个键,不是按ASCⅡ码对应的),keypress只可响应字符类键盘的按键
- keypress 返回ASCⅡ码,可以转换成相应字符 (大小写转换) keydown(不可区分字符类大小写)
文本操作事件:
input,focus,blur,change
input 但凡内部文本有变化都会触发
<input type="text">
<script type="text/javascript">
var input=document.getElementsByTagName('input')[0];
input.oninput=function(e){
console.log(this.value);
}
</script>
每 输入/删除 一个字符在控制台上都会有显示
change (对比鼠标聚焦和失去焦点状态的改变)状态改变才会在控制台上有显示
focus 会在对象获得焦点时发生
blur 会在对象失去焦点的时候发生
//实现了一个输入框,输入内容框中文本改变
<input type="text" value="输入" style="color:#999;">
<script type="text/javascript">
var input=document.getElementsByTagName('input')[0];
input.onfocus=function(){
if(this.value=="输入"){
this.value="";
this.style.color="#424242";
}
}
input.onblur=function(){
if(this.value==""){
this.value="输入";
this.style.color="#999"
}
}
</script>
窗体类:
(window 上的事件)
scroll 滚动条滚动触发事件
load ( js 读取时阻断页面 < html >一般放在下面)
要想放在前面可以写上:
//(这个文档解析完毕后才会执行 效率较低)
<script>
window.onload=function(){
js代码
}
</script>
浏览器解析过程:
(html css一起解析的,先解析再下载)