Js学习---妙味课堂3-1 （事件对象和事件冒泡）--- 获取鼠标+键盘事件

事件对象和事件冒泡

什么是事件对象？

来获取事件的详细信息：鼠标位置+键盘按键

获取鼠标位置：

clientX clientY --- FF 不支持，event不兼容， FF下多加一个参数 ev，之后该event为ev。

window.onload=function(){
document.onclick=function(){
alert(event.clientX);
}
} //获取横坐标

// 兼容模式：

document.onclick=function(ev){
if(ev){
alert(ev.clientX);
}
else
alert(event.clientX);
}

//改进 ：

document.onclick=function(ev){
var oEvent=event||ev; //一真一假时，会把真的付给定义的参数。全真，赋值前面的

alert(oEvent.clientX);
}

事件冒泡：

子集发生事件之后，会不断地向其上级”冒泡“。

window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
oDiv.style.display='block';//当这个onclick执行时，其父元素document的onclick也执行了！
}
document.onclick=function(){
oDiv.style.display='none';
}
}

改进：

window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
oDiv.style.display='block';//当这个onclick执行时，其父元素document的onclick也执行了！
var oEvent=ev||event;
oEvent.cancelBubble=true;//取消冒泡事件；
}
document.onclick=function(){
oDiv.style.display='none';
}
}

// 通过取消冒泡。

鼠标位置：

//跟随鼠标的div

document.onmousemove=function(ev){
var oDiv=document.getElementById('div1');
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
}; //注意函数参数  ev 不要忘

//实例： 一般用来做跟着鼠标的提示符。

// 补充：这里的 clientX 是可视区坐标。 div的top由两部分组成：可视区到最顶部的距离+鼠标可视区坐标。 即： top=clientY+scrollTop; --- 其中里面还存在着一点兼容性的问题。

window.onload=function(){
document.onmousemove=function(ev){
var oDiv=document.getElementById('div1');
var oEvent=ev||event;

//oDiv.style.left=oEvent.clientX+'px'+;
//oDiv.style.top=oEvent.clientY+'px'+document.scrollTop;
//但是document.documentElement.scrollTop在 chrome下不兼容，需要改为：document.body.scrollTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';

}; //注意函数参数  ev 不要忘
}

// 一串跟随鼠标的div

window.onload=function(){
document.onmousemove=function(ev){
var oDiv=document.getElementsByTagName('div');
var oEvent=ev || event;
var i=0;

for(i=oDiv.length-1;i>0;i--){
oDiv[i].style.left=oDiv[i-1].style.left;
oDiv[i].style.top=oDiv[i-1].style.top;
}
oDiv[0].style.left=oEvent.clientX+'px';
oDiv[0].style.top=oEvent.clientY+'px';
}; //注意函数参数  ev 不要忘
}

键盘事件：

keyCode

获取用户按下的哪个按键

//用键盘控制div的移动Code：

document.onkeydown=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
// 左： 37
if(oEvent.keyCode==37){
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
else if(oEvent.keyCode==39){
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}

其他属性：

ctrlKey,shiftKey,altKey 当按下ctrl时，ctrlKey的值才为真。

　　例子：提交留言

　　回车提交

　　ctrl+回车提交

总结：

获取事件对象 --- 鼠标点击、键盘按下、取消冒泡、||

冒泡、取消冒泡

DOM事件流

鼠标事件

键盘事件

要点：获取鼠标或者键盘事件，首先要有 Event = ev || event ;之后分别用Event.keyCode 或 Event.clientX ... 来分别实现获取键盘、鼠标的...

补充：documen : 最顶层的父节点。(等于window) 其第一个子节点是 '!' ; 第二个子节点是 html 。