事件一
2018-04-08 本文已影响0人
Monee121
事件基础（一）
- 什么是事件对象(点击事件，想知道用户点击了哪，就用到了事件对象)
用来获取事件的详细信息：鼠标位置，键盘按键
例子：获取鼠标的位置：clientX
document的本质：document.childNodes[0].tagName
最顶层的父节点
- document对象范围
- event事件对象、clientX、clientY
<script>
/*alert(document.childNodes[0].tagName);
//0是！或者未定义，1是html,document是最顶层的父节点
*/
document.onclick=function(ev){
//ie
//alert(event.clientX+','+event.clientY); //获取鼠标当前的横坐标
//FF
// alert(ev.clientX+','+ev.clientY);
/* if(ev)
{
alert(ev.clientX+','+ev.clientY);
}else
{
alert(event.clientX+','+event.clientY);
}
*/ // ||一边真，一边假，返回真，
var oEvent=ev || event; //兼容写法
alert(oEvent.clientX+','+oEvent.clientY);
}
</script>
- 事件对象的兼容性问题及解决方案
- 事件冒泡原理
子级发生事件，传递给父级，一直往上传，直到传给HTML之上document。
- 取消事件冒泡：cancelBubble、弹出层实例
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (ev)
{
var oEvent=ev||event;
oDiv.style.display='block';
//alert('按钮被点了');
oEvent.cancelBubble=true;//阻止事件冒泡
};
document.onclick=function ()
{
oDiv.style.display='none';
//alert('页面被点了');
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
- 跟随鼠标的DIV实例
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标跟随方框</title>
<script>
document.onmousemove=function (ev)
{
var oEvent=ev||event; //兼容ie和火狐
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //可视区到页面顶部的距离 非chrome chrome
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>
事件基础（二）
- 可视区坐标
- 滚动条所滚动的距离：scrollTop
- 滚动条所滚动的距离——解决谷歌浏览器兼容性问题
- 跟随鼠标的DIV实例——消除滚动条的影响
- 一串跟随鼠标的DIV实例
——思考题：在鼠标不移动时，也能实现鼠标跟随
<title>鼠标尾随一串</title>
<script>
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
for(i=aDiv.length-1;i>0;i--) //后一个跟着前一个走
{
aDiv[i].style.left=aDiv[i-1].style.left;
aDiv[i].style.top=aDiv[i-1].style.top;
}
aDiv[0].style.left=oEvent.clientX+'px'; //第一个跟着鼠标走
aDiv[0].style.top=oEvent.clientY+'px';
};
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
- 键盘事件：onkeydown、keyCode
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
alert(oEvent.keyCode);//返回键盘的键值
};
</script>
- 用键盘来控制DIV移动实例
——思考题：如何消除不卡顿的DIV移动
alert(oDiv.offsetLeft);//offsetWidth:margin没有影响，所有对宽度有影响的都考虑进去;
//offsetLeft:margin有影响，左边有影响的都考虑进去
//实际的宽，、、
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
//← 37
//右 39
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>
</body>
- 提交留言实例——ctrl+回车的提交方式
ctrlKey,shiftKey,altKey 返回布尔值，按着就是true
<script>
//提交留言，ctrl+enter,点击按钮时，把文本框的值，给了多行文本框
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oBtn.onclick=function ()//点击按钮时，把文本框的值,情况输入框
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
};
oTxt2.onkeydown=function (ev) //输入框添加键盘事件，
{
var oEvent=ev||event;
if(oEvent.ctrlKey && oEvent.keyCode==13)
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
