javascript入门基础篇重点第十三节_javascript快速入门13-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34187029/article/details/53130879

事件对象Event

事件发生的时候和事件相关的信息 -----> event
事件对象的兼容写法 e = e||window.event; (在事件当中，参数e由于ie低版本浏览器不支持，返回undefined,所以window.event，写兼容)

获取事件的对象一些内容
for(var key in e){
console.log(key+"======"+e[key]);
}
screenX 事件属性可以返回事件发生时鼠标相对于用户显示屏的水平坐标
clientX 鼠标相对于浏览器窗口可视区域的X
pageX 鼠标相对于文档距离水平方向X
offsetX 鼠标相对于定位父级的水平x偏移距离（若没有，相当于body定位）

拖拽事件（理解物体运动原理）

凡是要实现鼠标拖拽物体进行运动，必须要实现三个方法！（onmousedown(鼠标点击) onmousemove (鼠标移动) onmouseup(鼠标放开)）-------->要使用此方法必须将要移动的物体设置定位

例题：

盒子拖动

盒子放大缩小
<style type="text/css">
#box{width:100px;height:100px;background:red;position:absolute;top:200px;left:200px;opacity:.7;}
#drag{position:absolute;right:0;bottom:0;width:10px;height:10px;background:transparent;cursor:se-resize;}
</style>
</head>
<body>
<div id="box">
<div id="drag"></div>
</div>
<script type="text/javascript">
//盒子缩放
var oBox = document.getElementById("box");
var oDrag = document.getElementById("drag");
oDrag.onmousedown = function(e){
e = e||window.event;
var downX = e.clientX;
var downY = e.clientY;
//获取oBox的初始值的宽度与高度
var startWidth = parseInt(getStyle(oBox,"width"));
var startHeight = parseFloat(getStyle(oBox,"height"));
document.onmousemove = function(e){
e = e||window.event;
var moveX = e.clientX;
var moveY = e.clientY;
//最终目标
oBox.style.width = startWidth+moveX-downX+"px";
oBox.style.height = startHeight+moveY-downY+"px";
};
};
document.onmouseup = function(){
this.onmousemove = null;
};

//兼容获取样式
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};
</script>
</body>

事件冒泡与实例应用之下拉菜单（冒泡的理解之子类传递给父类）

<div id="parent">
<div id="child"></div>
</div>
<script type="text/javascript">
/*
事件冒泡：
在子元素上面触发事件，会传递给父元素
*/
var oParent = document.getElementById("parent");
var oChild = document.getElementById("child");
oParent.onclick = function(){
//alert("parent");
};
oChild.onclick = function(e){
e = e||event;
//alert("child");
e.cancelBubble = true;//取消冒泡
};

//鼠标移入移出事件
//onmouseover onmouseout
//onmouseenter onmouseleave
oParent.onmouseover = function(){
console.log("这是over");
};
oParent.onmouseenter = function(){
console.log("这是enter");
};
</script>

事件的绑定与解绑兼容性（事件另外一种绑定操作与如何解除绑定）

事件的绑定obj onclick------->产生覆盖------->document.onclick = null;//清空

obj addEventListener(eName,eFn,false)----->主流浏览器 --------removeEventListener解绑

obj attachEvent(eFn,false)--------->IE678 --------->detachEvent解绑

例如:

function a1(){
alert(1);
};
function a2(){
alert(2);
};

document.onclick = a1;
document.onclick = a2;------->用onclick产生覆盖,是弹出2

document.addEventListener("click",a1,false);-------默认给false

document.attachEvent("onclick",a1);

绑定事件兼容写法

解绑事件兼容写法

function removeEvent(obj,eName,eFn){
obj.addEventListener?obj.removeEventListener(eName,eFn,false):obj.detachEvent("$keywordIndex{14}"+eName,eFn);
};

键盘事件（响应焦点的对象，键值keyCode的应用）

键盘事件经常使用的对象方法 onkeydown / onkeypress /onkeyup 三者的区别于联系！

键盘事件
onkeydown 键盘上的按键都可以触发
onkeypress 只能触发能输入字符的键，箭头键或者功能键不能触发
onkeyup 键抬起的时候瞬间触发
keyCode 键值回车13 37-40左上右下方向键

例如：

oTxt.onkeydown = function(){
console.log("onkeydown");
};

开发经常用到onkeyup
oTxt.onkeyup = function(){
console.log(this.value);
};

keyCode使用(实现按方向键使方块移动)

var oBox = document.getElementById("box");
document.onkeydown = function(e){
e = e||window.event;
var code = e.keyCode;
switch(code){
case 37:
oBox.style.left = oBox.offsetLeft-10+"px";
break;
case 38:
oBox.style.top = oBox.offsetTop-10+"px";
break;
case 39:
oBox.style.left = oBox.offsetLeft+10+"px";
break;
case 40:
oBox.style.top = oBox.offsetTop+10+"px";
break;
}
};