事件流第一章

1-1。事件冒泡：首先由特定元素（文档中最深的嵌套节点）接收事件；

然后向上传播到最不特定的节点（文档）；

1-2。事件捕获：较不特定的节点应更早接收事件，最具体的节点最终接收事件；

第二章事件处理程序

2-1事件处理程序

缺点：HTML和js代码紧密耦合在一起；







2-2层级事件处理程序

与传统方法相比：将一个函数分配给事件处理程序属性，使用更多；

优点：简单/跨浏览器；




var BTN2 = document.getelementbyid（'btn2 '）； / / BTN2按钮；
（btn2.onclick =功能）{ / / BTN2添加onclick属性；
警觉（这是事件加做！）；
}
BTN2。onclick = null； / /删除onclick属性；



2-3 DOM2级事件处理程序

/ / DOM2级事件定义了两个方法：办理指定事件处理程序和删除操作；

/ / removeeventlistner addEventListener（）和（）；

接收三个参数：处理事件名称事件处理程序和布尔值；

/ / IE8，没有影响；




var BTN3 = document.getelementbyid（'btn3）；
btn3.addeventlistener（听到咔哒声，被，false）； / /添加事件处理程序；
btn3.addeventlistener（听到咔哒声，功能）{ / /（添加多个事件处理程序；
警报（这个值）；
}，假）；
btn3.removeeventlistener（听到咔哒声，被，false）； / /删除事件过程；



2-4 IE事件处理程序和跨浏览器

接收两个参数：函数事件处理和事件处理函数的名称



var BTN3 = document.getelementbyid（'btn3）；
btn3.attachevent（'onclick '，被）； / /添加事件；
btn3.detachevent（'onclick '，被）； / /删除事件；



> 2。浏览器的兼容性


/ /添加和删除事件处理程序包的对象赋给variable'eventutil；
无功eventutil = { {
添加 /句柄
AddHandler：功能（元素、类型、处理）{
法官DOM2 / /事件处理程序；
如果（元。addEventListener）{
element.addeventlistener（类型、处理程序、错误）；
法官浏览器；
} else if（元。attachevent）{
element.attachevent（+型，处理程序）；
做 / /的事件处理程序的使用；
其他{ }
元{开+型} =处理程序；
}
}；
处理/删除
RemoveHandler：功能（元素、类型、处理）{
法官DOM2 / /事件处理程序；
如果（元。removeEventListener）{
element.removeeventlistener（类型、处理程序、错误）；
法官浏览器；
} else if（元。detachevent）{
element.detachevent（+型，处理程序）；
做 / /的事件处理程序的使用；
其他{ }
元{开+型} = null；
}；
}；
}；
跨浏览器添加事件处理程序；
EventUtil.addHandler（BTN3，听到咔哒声，被）；


第三章事件对象

3-1 DOM中的事件对象

在DOM触发器事件中有一个=事件对象；

> 1.type = =得到事件类型；

> 2.target = =到事件目标；

（> 3。里面）=停止事件冒泡；

（> 4。preventDefault）=停止事件的默认行为；


功能showmes（事件）{
警报（事件类型）； / /框；单击事件；
警报（事件。目标。nodeName）； / /输入；输入按钮被触发；
（事件。里面）； / /停止事件；
}
跳
函数的时候（事件）{
（事件。preventDefault）； / /防止违约行为；
}


3-2中的事件对象

> 1.type = =；

> 2.srcelement属性获取事件目标= =；

> 3.canclebubble房产泡沫真的= =设定停止；停止泡沫，虚假不组织泡沫；

> 4.returnvalue属性用于阻止事件的默认行为= =；


功能showmes（事件）{
IE /事件，IE8 window.event；
事件=事件window.event | |；
事件对象兼容性；
无功电= event.target event.srcelement | |；
兼容停止事件；
如果（事件。里面）{
event.stoppropagation（）；
其他{ }
event.canclebubble（）；
}；
兼容取消事件默认行为；
如果（事件。preventDefault）{
Event.preventDefault（）；
其他{ }
event.returnvalue = false；
}
}


第四章QQ面板拖动效果

> > 1的类方法。封装


功能getClass（clsname，母）{
无功oparent = parentdocument.getelementbyid（母）：文件，
ELES = { }，
元素= oparent.getelementsbytagname（*）；

对于（var i = 0，L = elements.length；i < L；i++）{
如果（元素{我}，{ clsname classname = =）
Eles.push（元素{我}）；
}
}
回归模型；
}


> 2。包拖放功能


在window.onload =阻力；
函数拖动（）{
无功otitle = getClass（'login_lo_webqq '，'loginpanel）{ 0 }；
拖动
otitle.onmousedown = fndown；
关闭窗口
var o严密= document.getelementbyid（'ui_boxyclose）；
oclose.onclick =函数（）{
document.getelementbyid（'loginpanel）。Style.display =不关；
}
开关状态
无功loginstate = document.getelementbyid（'loginstate），
statelist = document.getelementbyid（'loginstatepanel），
LIS = statelist.getelementsbytagname（李的），
statetxt = document.getelementbyid（'login2qq_state_txt），
loginstateshow = document.getelementbyid（'login-state_show）；
loginstate.onclick =功能（e）{
文件 / / UL停止冒泡隐藏；
E = e window.event | |；
如果（e.stoppropagation）{
e.stoppropagation（）；
还有{ }
e.canclebubble =真；
}
statelist.style.display =块；
}
在鼠标左键单击鼠标，然后单击状态列表。
对于（var i = 0，我的<< lis.length，i++）{
LIS {我}。onmouseover =函数（）{
this.style.background =# 567 ；
}
LIS {我}。onmouseout=函数（）{
this.style.background =# FFF；
}
LIS {我}。onclick=功能（e）{
停止/冒泡到statelist显示loginstate；
E = e window.event | |；
如果（e.stoppropagation）{
e.stoppropagation（）；
还有{ }
e.canclebubble =真；
}
var id = this.id；
statelist.style.display =没有；
statetxt.innerhtml = getClass（'stateselect_text，ID）{ 0 }。innerHTML；
loginstateshow.classname =；
loginstateshow.classname = 'login-state-show +身份证；
}
}
onclick =函数（）{
statelist.style.display =没有；
}
}
/ /鼠标；
功能fndown（事件）{
事件=事件window.event | |；
无功odrag = document.getelementbyid（'loginpanel），
鼠标单击，鼠标与面板之间的距离；
event.clientx - odrag.offsetleft disx =，
event.clienty - odrag.offsettop Disy =；
莫比尔
document.onmouseover =函数（事件）{
事件=事件window.event | |；
fnmove（事件、disx，Disy）；
}
释放/鼠标
document.onmouseup =函数（）{
document.onmouseover = null；
document.onmouseup = null；
}
}
鼠标事件；
功能fnmove（E条POSx，波西）{
无功odrag = document.getelementbyid（'loginpanel），
我e.clientx-posx，
T = e.clienty-posy，
winw = document.documentelement.clientwidth document.body.clientwidth | |，
总结= document.documentelement.clientheight document.body.clientheight | |；
maxw = winw-odrag.offsetwidth，
maxh = winh-odrag.offsetheight；
如果（l < 0）{
l＝0；
} else if（L＞maxw）{
我maxw；
}
如果（t＜0）{
T＝0；
} else if（t > maxh）{
T = maxh；
}
odrag.style.left = L + 'px；
odrag.style.top = T + 'px；
}


第四章彩票制度

> 1。键盘事件

> > 1.keydown：触发时，用户按下键盘上的任意键，并触发事件屡屡如果按下并保持。

> > 2.keypress：触发，当用户按下键盘上的字符键和触发事件屡屡如果举行。

> > 3.keyup：触发，当用户释放键盘上的键的；

> 2。抽奖程序


VaR数据= { 'iphone5 '，'ipad '三星'计算机'，'谢谢' }在，
计时器= null，
标志＝0；
在window.onload =函数（）{
VaR玩= document.getelementbyid（扮演的），
document.getelementbyid停止（停止'）；
（鼠标）开始画。
play.onclick = palyfun；
stop.onclick = stopfun；
（输入/键盘）开始绘图。
document.onkeyup =函数（事件）{
事件=事件window.event | |；
如果（的情况下= = 13）{
如果（标志= 0）{
PalyFun（）；
标志＝1；
其他{ }
StopFun（）；
标志＝0；
}
}
}
}
功能palyfun（）{
var title= document.getelementbyid（标题），
玩= document.getelementbyid（扮演的）；
在删除定时器之前，定时器重复放置；
ClearInterval（定时器）；
设置计时器；
定时器= setInterval（）{（）函数（
随机数*数组元素的数目=随机数组索引；
无功随机= math.floor（Math.random）*（数据长度）；
title.innerhtml =数据{随机}；
}，50）；
play.style.background =# 999 ；
}
功能stopfun（）{
ClearInterval（定时器）；
VaR玩= document.getelementbyid（扮演的）；
paly.style.background =036#；
}