JavaScript基础 事件对象
2018-02-23 本文已影响0人
0说
常规下：事件函数的第一个参数就是事件对象
事件对象：它记录了触发本次事件的相关信息
点击事件
<script>
document.onclick = function ( e ){
console.log( e )
}
</script>
事件对象详细图
图片.png
兼容问题：
ie8下不支持第一个参数写法，只支持window.event
火狐支持第一个参数写法
<script type="text/javascript">
document.onclick = function (e){ //在ie8下e是undefined （ie8下认识window.event 火狐认识e）
//第一个参数e 可以看成 var e;
e = e || window.event; //e = undefined || window.event <===> e = false || window.event 就取 window.event
console.log(e);
}
</script>
事件对象传参数
有传参的时候最后一个参数是事件对象
例：
document.onclick = fn.bind(this , 1 , 2 );
function fn( a , b , e ) { /e是事件对象 上面实参不用传 传会报错
console.log( a );
console.log( b );
console.log( e );
}
1、clientX 鼠标坐标相对可视区域X轴坐标
2、clientY鼠标坐标相对可视区域Y轴坐标 （兼容所有）
3、pageX鼠标坐标到左边的X轴坐标 （不兼容低版本IE）
4、pageY鼠标坐标到文档顶部Y轴坐标
pageY兼容
<script type="text/javascript">
document.onclick = function (e){
e = e || window.event;
var pagY = e.clientY + document.documentElement.scrollTop;
//document.documentElement.scrollTop 滚动高度
console.log(pagY);
}
</script>
图片.png
e.type 得到的是事件对象名称
<script type="text/javascript">
document.onclick = function (e){
e = e || window.event;
console.log( e.type );
}
</script>
图片.png
键盘事件
<body style='height: 2500px;'>
<input id='inp' type="text" name="">
<script type="text/javascript">
inp.onkeydown = function ( e ){
e = e || window.event;
console.log( e );
}
</script>
</body>
图片.png
keyCode 得到的是键值
<body style='height: 2500px;'>
<input id='inp' type="text" name="">
<script type="text/javascript">
inp.onkeydown = function ( e ){
e = e || window.event;
console.log( e.keyCode );
}
</script>
</body>
图片.png
1、0 ====> 48
2、q ====> 81
3、ctrl ===> 17
4、enter ===> 13
code:得到的是按下哪个键
<body style='height: 2500px;'>
<input id='inp' type="text" name="">
<script type="text/javascript">
inp.onkeydown = function ( e ){
e = e || window.event;
console.log( e.code );
}
</script>
</body>
图片.png
案例
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
div{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body style='height: 2500px;'>
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName( 'box' )[0],
winLeft = document.documentElement.clientWidth,
winTop = document.documentElement.clientHeight,
boxW = oBox.clientWidth,
boxH = oBox.clientHeight,
maxWinX = winLeft - boxW, //计算出盒子能走到浏览器最大的宽度
maxWinY = winTop - boxH; //计算出盒子能走到浏览器最大的高度
//监视浏览器窗口的变化
window.onresize = function (){
winLeft = document.documentElement.clientWidth;
winTop = document.documentElement.clientHeight;
maxWinX = winLeft - boxW;
maxWinY = winTop - boxH;
}
console.log( maxWinY );
oBox.onmousedown = function (e){
e = e || window.event;
var downX = e.clientX,//获取点下时鼠标的x坐标
downY = e.clientY,//获取点下时鼠标的Y坐标
startX = this.offsetLeft, //获取初始定位
startY = this.offsetTop;//获取初始定位
document.onmousemove = function (e){
//为什么要document 因为如果在oBox里移动的时候很快，鼠标会跑出oBox oBox就不会跟着跑了
e = e || window.event;
var moveX = e.clientX, //获取移动鼠标x轴
moveY = e.clientY, //获取移动鼠标Y轴
changeX = moveX - downX, //鼠标移动的变化量
changeY = moveY - downY, //鼠标移动的变化量
Top = startY + changeY, //鼠标变化量加上定位的top值
Left = startX + changeX; //鼠标变化量加上定位的left值
if( Top >= maxWinY || Top < 0 ){
Top = Math.min( Top , maxWinY ); //判断top有没有超过盒子能走到最大的高度
Top = Math.max( Top , 0 );
}
if( Left >= maxWinX || Left < 0 ){
Left = Math.min( Left , maxWinX );//判断top有没有超过盒子能走到最大的宽度
Left = Math.max( Left , 0 );
}
oBox.style.top = Top + 'px';
oBox.style.left = Left + 'px';
}
document.onmouseup = function (){
document.onmousemove = null; //鼠标抬起时清除一下move
document.onmouseup = null; //鼠标抬起时清除一下自己，没清到时候会出现代码叠加
}
}
</script>
</body>
