JavaScript DOM事件(笔记)
第1章事件流
1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
然后逐级向上传播至最不具体的那个节点(文档);
1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;
第2章事件处理程序
2-1HTML事件处理程序
//缺点:HTML和JS代码紧密的耦合在一起;
<inputtype="button"value="按钮"onclick="showMessage()">
2-2DOM0级事件处理程序
//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
//优点:简单/跨浏览器;
<inputtype="button"value="按钮"id="btn2">
<script>
varbtn2=document.getElementById('btn2');//取得btn2按钮对象;
btn2.onclick=function(){//给btn2添加onclick属性;
alert('这是通过DOM0级添加的事件!');
}
btn2.onclick=null;//删除onclick属性;
</script>
2-3DOM2级事件处理程序
//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
//addEventListener()和removeEventListner();
//接收三个参数:要处理的事件名/事件处理函数和布尔值;
//在IE8一下,不起作用;
<inputtype="button"value="按钮"id="btn3">
<script>
varbtn3=document.getElementById('btn3');
btn3.addEventListener('click',showMessage,false);//添加事件程序;
btn3.addEventListener('click',function(){//添加多个事件程序;
alert(this.value);
},false);
btn3.removeEventListener('click',showMessage,false);//删除事件程序;
</script>
2-4IE事件处理程序及跨浏览器
//接收两个参数:事件处理函数名称和事件处理函数
<script>
varbtn3=document.getElementById('btn3');
btn3.attachEvent('onclick',showMessage);//添加事件;
btn3.detachEvent('onclick',showMessage);//删除事件;
</script>
>2.浏览器兼容
//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
vareventUtil={
//添加句柄
addHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.addEventListener){
element.addEventListener(type,handler,false);
//判断IE浏览器;
}elseif(element.attachEvent){
element.attachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type]=handler;
}
};
//删除句柄
removeHandler:function(element,type,handler){
//判断DOM2级事件处理程序;
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//判断IE浏览器;
}elseif(element.detachEvent){
element.detachEvent("on"+type,handler);
//使用DOM0级事件处理程序;
}else{
element['on'+type]=null;
};
};
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,'click',showMessage);
第3章事件对象
3-1DOM中的事件对象
//在触发DOM上的事件时都会产生一个对象==event;
>1.type==获取事件类型;
>2.target==获取事件目标;
>3.stopPropagation()==停止事件冒泡;
>4.preventDefault()==阻止事件的默认行为;
functionshowMes(event){
alert(event.type);//onclick;点击事件;
alert(event.target.nodeName);//INPUT;input按钮被触发;
event.stopPropagation();//停止事件冒泡;
}
<ahref="event.html"onclick="stopGoto();">跳转</a>
functionstopGoto(event){
event.preventDefault();//阻止默认行为;
}
3-2IE中的事件对象
>1.type==同上;
>2.srcElement属性==获取事件目标;
>3.cancleBubble属性==阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
>4.returnValue属性==用于阻止事件的默认行为;
functionshowMes(event){
//非IE用event,IE8以下用window.event;
event=event||window.event;
//事件目标兼容;
varele=event.target||event.srcElement;
//兼容阻止事件冒泡;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble();
};
//兼容取消事件默认行为;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
第4章QQ面板拖拽效果
>1.封装获取Class方法
functiongetClass(clsName,parent){
varoParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');
for(vari=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
returneles;
}
>2.封装拖拽函数
window.onload=drag;
functiondrag(){
varoTitle=getClass('login_logo_webqq','loginPanel')[0];
//拖拽
oTitle.onmousedown=fnDown;
//关闭弹窗
varoClose=document.getElementById('ui_boxyClose');
oClose.onclick=function(){
document.getElementById('loginPanel').style.display='none';
}
//切换状态
varloginState=document.getElementById('loginstate'),
stateList=document.getElementById('loginStatePanel'),
lis=stateList.getElementsByTagName('li'),
stateTxt=document.getElementById('login2qq_state_txt'),
loginStateShow=document.getElementById('login-state_show');
loginState.onclick=function(e){
//阻止冒泡到document使ul隐藏;
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble=true;
}
stateList.style.display="block";
}
//鼠标滑过/离开和点击状态列表时
for(vari=0,i<lis.length,i++){
lis[i].onmouseover=function(){
this.style.background="#567";
}
lis[i].onmouseout=function(){
this.style.background="#fff";
}
lis[i].onclick=function(e){
//阻止冒泡到loginState使stateList显示;
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();
}esle{
e.cancleBubble=true;
}
varid=this.id;
stateList.style.display="none";
stateTxt.innerHTML=getClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className='';
loginStateShow.className='login-state-show'+id;
}
}
document.onclick=function(){
stateList.style.display="none";
}
}
//鼠标按下事件;
functionfnDown(event){
event=event||window.event;
varoDrag=document.getElementById('loginPanel'),
//鼠标按下时,鼠标和面板之间的距离;
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
//移动
document.onmouseover=function(event){
event=event||window.event;
fnMove(event,disX,disY);
}
//释放鼠标
document.onmouseup=function(){
document.onmouseover=null;
document.onmouseup=null;
}
}
//鼠标移动事件;
functionfnMove(e,posX,posY){
varoDrag=document.getElementById('loginPanel'),
l=e.clientX-posX,
t=e.clientY-posY,
winW=document.documentElement.clientWidth||document.body.clientWidth,
winH=document.documentElement.clientHeight||document.body.clientHeight;
maxW=winW-oDrag.offsetWidth,
maxH=winH-oDrag.offsetHeight;
if(l<0){
l=0;
}elseif(l>maxW){
l=maxW;
}
if(t<0){
t=0;
}elseif(t>maxH){
t=maxH;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
第4章抽奖系统
>1.键盘事件
>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
>>3.keyUp:当用户释放键盘上的键时触发;
>2.抽奖程序
vardata=['iPhone5','iPad','三星电脑','谢谢参与'],
timer=null,
flag=0;
window.onload=function(){
varplay=document.getElementById('play'),
stop=document.getElementById('stop');
//(鼠标)开始抽奖
play.onclick=palyFun;
stop.onclick=stopFun;
//(键盘Enter)开始抽奖
document.onkeyup=function(event){
event=event||window.event;
if(event.keyCode==13){
if(flag==0){
palyFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}
functionpalyFun(){
vartitle=document.getElementById('title'),
play=document.getElementById('play');
//清除之前的定时器,放置定时器重复;
clearInterval(timer);
//设置定时器;
timer=setInterval(function(){
//随机数*数组元素个数=数组随机索引;
varrandom=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},50);
play.style.background="#999";
}
functionstopFun(){
clearInterval(timer);
varpaly=document.getElementById('play');
paly.style.background='#036';
}