event对象：用来获取事情的详细信息(低版本不支持)。
给body加事件用document.onclick而不是body，因为body.onclick如果没有内容的话是不会触发事件的。
event对象的使用，解决兼容问题：
window.onload=function(){
document.onclick=function(e){
//IE
//alert(event.clientX+','+event.clientY);
//FF
//alert(e.clientX+','+e.clientY);
//通用
var oEvent=e||event;
alert(oEvent.clientX+','+oEvent.clientY)
};
};
事件冒泡是典型的事件流。例：
当点击最里层会一直冒泡到最外层。
<!DOCTYPE html>
<html onclick="alert('html')">
<head>
<meta charset="UTF-8">
<title></title>
<script>
</script>
<style>
div {
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background: red" onclick="alert(this.style.background)">
<div style="background: gray" onclick="alert(this.style.background)">
<div style="background: yellow" onclick="alert(this.style.background)"></div>
</div>
</div>
</body>
</html>
2018-03-26 at 16.37.gif
取消冒泡：oEvent.cancelBubble = true;//高版本浏览器
参考链接：http://www.jb51.net/article/95208.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(e){
var oEvent=e||event;
if(oDiv.style.display=='block'){
oDiv.style.display='none';
}else {
oDiv.style.display='block';
}
// alert("按钮点击事件");
oEvent.cancelBubble=true; //高版本浏览器
//如果不加上cancelBubble取消冒泡的话，点击按钮就会触发到document，所以div才会hide掉。
};
document.onclick=function(){
//点击body隐藏div
if(oDiv.style.display='block') {
oDiv.style.display='none';
}
// alert("document点击事件");
};
};
</script>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
</head>
<body>
<input id="btn1" type="button" value="显示"/>
<div id="div1"></div>
</body>
</html>
div跟着鼠标的移动而移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
document.onmouseover=function(e){
var oDiv=document.getElementById('div1');
var oEvent=e||event;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
oDiv.style.left=oEvent.clientX+scrollLeft+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';
};
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
封装：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
function getPos(e){
var oEvent=e||event;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
return{x:oEvent.clientX+scrollLeft,y:oEvent.clientY+scrollTop}
}
document.onmouseover=function(e){
var oDiv=document.getElementById('div1');
oDiv.style.left=getPos().x+'px';
oDiv.style.top=getPos().y+'px';
};
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
键盘的keyCode
document.onkeydown=function(e){
var oEvent=e||event;
alert(oEvent.keyCode);
};
用键盘左右键来控制div的移动
<div id="div1"></div>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
document.onkeydown=function(e){
var oEvent=e||event;
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==37){
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39){
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};
把input的值传给textarea
<input id="text1" type="text" />
<input id="btn1" type="button" value="发布"/><br />
<textarea id="text2" cols="30" rows="10"></textarea>
window.onload=function(){
var oTxt1=document.getElementById('text1');
var oBtn=document.getElementById('btn1');
var oTxt2=document.getElementById('text2');
oBtn.onclick=function(){
if(oTxt1.value==''){
alert("请输入内容");
}else {
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
};
按下键盘的回车键和Ctrl键，把input的值传给textarea
<input id="text1" type="text" /><br />
<textarea id="text2" cols="30" rows="10"></textarea>
window.onload=function(){
var oTxt1=document.getElementById('text1');
var oTxt2=document.getElementById('text2');
oTxt1.onkeydown=function(e){
oEvent=e||event;
if(oEvent.keyCode==13 && oEvent.ctrlKey){
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
};
网友评论