1, 鼠标事件
文本:
event对象:用来获取事件的详细信息:鼠标位置、键盘按键
例子:获取鼠标位置:clientX
document的本质:document.childNodes[0].tagName
获取event对象(兼容性写法) —— var oEvent=ev||event;
事件流 —— 事件冒泡
取消冒泡:oEvent.cancelBubble=true
鼠标位置 ? 可视区位置:clientX、clientY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一串跟着鼠标移动的Div@Cookie_fzx</title>
</head>
<style>
div{width:10px; height:10px; background: darkviolet; position: absolute;}
</style>
<script>
function getPos(ev) { // 获取鼠标在页面的绝对位置
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop ;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
return {y: ev.clientY+scrollTop, x: ev.clientX+scrollLeft };
}
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>
<body>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>
2. 键盘事件
keyCode: 获取用户按下键盘的哪个按键
其他属性: ctrlKey、shiftKey、altKey
zEvent.keyCode == 13 && zEvent.ctrlKey
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件—键盘回车提交留言</title>
<script>
window.onload=function () {
var zText1=document.getElementById('text1');
var zText2=document.getElementById('text2');
zText1.onkeydown=function (ev) {
var zEvent= ev || event;
if(zEvent.keyCode == 13 && zEvent.ctrlKey){ // entry 并且 ctrl
zText2.value+= zText1.value + '\n';
zText1.value='';
}
};
};
</script>
</head>
<body>
<input id="text1" type="text" />
<br/><br/>
<textarea id="text2" type="text" rows="10" cols="40" ></textarea>
</body>
</html>