一、event对象
用来获取事件的详细信息:鼠标位置,键盘按键
获取event对象,兼容写法:var oEvent=ev||event;
eg1: 鼠标点击页面任意位置,弹出坐标。
js代码:
document.οnclick=function(ev){ //document是最顶层父元素
var oEvent=ev||event; //火狐(获得ev)和IE(event)兼容写法
alert(oEvent.clientX+","+oEvent.clientY); //弹出鼠标点击坐标
}
这里是点击document触发事件才能获得坐标位置,可以试试改成html和body,代码失效,因为document是页面的最顶层的元素,html和body必须要有高度才能点击上。
eg2: 跟随鼠标的div
#div2{background: red;height: 100px;width: 100px;position:absolute}
<script type="text/javascript">
document.οnmοusemοve=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div2');
<span style="color:#FF0000;">var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//火狐IE与谷歌的兼容</span>
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
oDiv.style.left=oEvent.clientX+scrollLeft+'px'; //clientX仅为可视区坐标,所以要加上滚动条距离
oDiv.style.top=oEvent.clientY+scrollTop+'px';
}
</script>
<body style="height: 2000px;width: 2000px;">
<div id="div2"> </div>
</body>
在这里,clientX和clientY是可视区内的鼠标坐标,不是对于整个页面左上角的坐标,所以一定要消除滚动条的影响,
用BOM中的scrollTop和scrollLeft来获取可视区到页面顶部的距离。最好带上,消除隐患。
二:事件流
事件冒泡:
<body>
<div style="width: 300px;height: 300px;background: red;" οnclick="alert(this.style.background)">
<div style="width: 200px;height: 200px;background: green;" οnclick="alert(this.style.background)">
<div style="width: 100px;height: 100px;background: yellow;" οnclick="alert(this.style.background)">
</div>
</div>
</div>
这里,如果就这样写,在弹出子元素的背景色,它会一层一层弹出父元素的背景色,一直到html,这就是冒泡。这是令人困扰的。
下面来一个实际的例子,点击按钮div出现,点页面中除了按钮之外的位置,div隐藏,很眼熟的吧~
<input id="btn1" type="button" value="弹出"/>
<div id="div1" style="display:none;background: #ccc;width: 100px;height: 100px;"></div>
</body>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.οnclick=function(ev){
<span style="color:#FF0000;">var oEvent=ev||event;</span>
oDiv.style.display='block';
<span style="color:#FF0000;"> oEvent.cancelBubble="true";</span>
//如果不阻止冒泡,点击按钮并不会使div出现,因为btn是document的子元素,点击它也会触发document的点击函数,所以要消除冒泡,就解决了。
}
document.οnclick=function(){
oDiv.style.display='none';
}
}
</script>
取消冒泡:oEvent.cancelBubble=true;
三、键盘事件
keyCode获取用户按下了哪个按键,具体每个按键的值可以弹出来知道。
ctrlKey,shiftKey,altkey为布尔值,true or false,可以和其他按键一起用,
比如ctrl和enter键发送留言消息:
#txt1{width: 300px;}
#txt2{width: 250px;}
#btn1{width: 50px;}
<script type="text/javascript">
window.οnlοad=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
oTxt2.οnkeydοwn=function(ev){
var oEvent=ev||event;
if(oEvent.ctrlKey&&oEvent.keyCode==13){ //获取按键。ctrl+enter发送
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
}
//布尔值:ctrlKey,shiftKey,altKey。按下时为true,松开时为false
}
</script>
<body>
<textarea id="txt1" rows="8"></textarea><br />
<input id="txt2" />
<input id="btn1" type="button" value="提交" />
</body>