事件对象(获取事件的详细信息)和事件冒泡:
- 什么是event对象:获取事件的详细信息:鼠标位置、键盘按键。
document本质:document.childNodes[0].tagName
- 获取event对象(兼容性写法):var oEvent=ev||event;
//点击界面没有反应。因为body里面没有内容,没有撑开。
<script>
window.onload=function(){
document.body.onclick=function(){
alert('a');
}
}
</script>
</head>
<body>
</body>
//此时点击黑框中的东西,就可弹出。
<script>
window.onload=function(){
document.body.onclick=function(){
alert('a');
}
}
</script>
</head>
<body style="border: 1px solid black">
<input type="button" value="aaa"/>
</body>
直接document.onclick就可以啦。
- 事件event对象:
- 用来获取事件的详细信息:鼠标位置、键盘按键。
- 鼠标事件:
- 可视区位置:clientX、clientY
- 例子:跟随鼠标的div 消除滚动条的影响 滚动条的意义:可视区与页面顶部的距离
<script>
window.onload=function(){
document.onclick=function(){
//IE
alert(event.clientX+' '+event.clientY);//获取横纵坐标。
}
}
</script>
<script>
window.onload=function(){
document.onclick=function(ev){
//IE
//alert(event.clientX+' '+event.clientY);//获取横纵坐标。
//火狐
alert(ev.clientX+' '+ev.clientY);
//兼容的事件对象
var oEvent=ev||event;
alert(oEvent.clientX+' '+oEvent.clientY)
}
}
</script>
- 事件冒泡:事件会顺着层级一直往它的父级上传。一直传到document上为止。
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background: #cccccc" onclick="alert(this.style.background);">
<div style="background: green" onclick="alert(this.style.background);">
<div style="background: red" onclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>
大部分时候事件冒泡会给我们带来麻烦。我们一般不会主动使用它。
点击按钮灰框显示,点击灰框和按钮以外的地方,灰框消失。
<style>
#div1{
width: 100px;
height: 100px;
background: #cccccc;
display: none;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById('oBtn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
oDiv.style.display='block';
/*alert('按钮被点击了')*/
}
document.onclick=function(){
oDiv.style.display='none';
/*alert('document被点击了')*/
}
}
</script>
</head>
<body>
<input type="button" id="oBtn" value="显示"/>
<div id="div1"></div>
</body>
以上这种做法错误,灰框非但不会消失,也不会显示。这就是事件冒泡带来的影响。
<script>
window.onload=function(ev){
var oBtn=document.getElementById('oBtn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
var oEvent=ev||event;
oDiv.style.display='block';
oEvent.cancelBubble=true;
/*alert('按钮被点击了')*/
}
document.onclick=function(){
oDiv.style.display='none';
/*alert('document被点击了')*/
}
}
</script>
div一直跟着鼠标走。
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
存在隐患:
//div和鼠标的距离会随着滚动条的距离增大而增大。
<body style="height: 2000px;">
<div id="div1"></div>
</body>
<script>
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';
}
</script>
clientY要配合scrollTop来使用。但凡遇到clientX和clientY就要用到scrollTop和scrollLeft.
封装成函数:
<script>
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
}
</script>
例子:很多小div,div跟着鼠标移动。
-
style> div{ width: 20px; height: 20px; background: red; position: absolute; } </style> <script> //获取的是鼠标的位置 function getPos(ev){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; } document.onmousemove=function(ev){ var aDiv=document.getElementsByTagName('div'); var oEvent=ev||event; var pos=getPos(oEvent); for(var i=aDiv.length-1;i>0;i--){ //后一个跟前一个走 aDiv[i].style.left=aDiv[i-1].offsetLeft+'px'; aDiv[i].style.top=aDiv[i-1].offsetTop+'px'; } //第一个跟鼠标走 aDiv[0].style.left=pos.x+'px'; aDiv[0].style.top=pos.y+'px'; } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body>
- 键盘事件:
- keyCode
- 其他属性:ctrlKey、shiftKey、altKey
//弹出我们按的ASCII码值
<script>
document.onkeydown=function(ev){
var oEvent=ev||event;
alert(oEvent.keyCode);
}
</script>
例子:键盘控制div移动。
<style>
#div1{
width: 100px;
height: 100px;
background: #cccccc;
position: absolute;
}
</style>
<script>
document.onkeydown=function(ev){
var oEvent=ev||event;
//alert(oEvent.keyCode);
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==38){
oDiv.style.top=oDiv.offsetTop-10+'px';
}else if(oEvent.keyCode==40){
oDiv.style.top=oDiv.offsetTop+10+'px';
}else if(oEvent.keyCode==37){
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39){
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
其他属性:ctrl+回车 提交留言
点击按钮提交:
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="发布"/><br/>
<textarea name="" id="txt2" cols="30" rows="10">
</textarea>
</body>
按回车提交:
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oTxt1.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==13){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
}
</script>
按ctrl和回车提交:
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oTxt1.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==13&&oEvent.ctrlKey){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
}
</script>