Skip to content

Commit 5cd1a7d

Browse files
anbanganbang
committed
DOM2事件
1 parent 0298205 commit 5cd1a7d

49 files changed

Lines changed: 4540 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎DOM2/DOM2事件/1、事件基础/3、冒泡和捕获.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>点击哪个标签就把哪个标签名输出</title>
6+
</head>
7+
<body>
8+
<div id="div1" style="background: red">
9+
<br/>
10+
<ul id="ul1" style="background: blue">
11+
<br/>
12+
<li id="li1" style="background: orange">
13+
<br/>
14+
<a href="1" style="background: olive;display: block;"><br/>1</a>
15+
<a href="2" style="background:blueviolet;display: block;"><br/>2</a>
16+
<a href="3" style="background: olive;display: block;"><br/>3</a>
17+
<a href="4" style="background: chocolate;display: block;"><br/>4</a>
18+
</li>
19+
</ul>
20+
</div>
21+
</body>
22+
</html>
23+
<script>
24+
function fn(e){
25+
e=e||event;
26+
if(e.stopPropagation){
27+
e.stopPropagation();
28+
}else{
29+
e.cancelable=true;
30+
}
31+
if(e.preventDefault){
32+
e.preventDefault();//标准浏览器阻止默认行为
33+
}else{
34+
e.returnValue=false;//IE阻止默认行为
35+
}
36+
console.log(this.nodeName);
37+
}
38+
eles=document.getElementsByTagName("*");
39+
for(var i=0;i<eles.length;i++){
40+
eles[i].addEventListener("click",fn,false);
41+
}
42+
43+
//下面是动态创建的
44+
var p=document.createElement("p");
45+
document.body.appendChild(p);
46+
p.innerHTML="222312312312";
47+
/*动态创建的，不能有效果，可以用事件委托来实现*/
48+
</script>

‎DOM2/DOM2事件/1、事件基础/4、事件委托.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div id="div1" style="background: red">
9+
<br/>
10+
<ul id="ul1" style="background: blue">
11+
<br/>
12+
<li id="li1" style="background: orange">
13+
<br/>
14+
<a href="javascript:;" style="background: olive;display: block;"><br/>1</a>
15+
<a href="javascript:;" style="background:blueviolet;display: block;"><br/>2</a>
16+
<a href="javascript:;" style="background: olive;display: block;"><br/>3</a>
17+
<a href="javascript:;" style="background: chocolate;display: block;"><br/>4</a>
18+
</li>
19+
</ul>
20+
</div>
21+
</body>
22+
</html>
23+
<script>
24+
document.documentElement.onclick=function(event){
25+
event=event||window.event;
26+
//事件源委托给documentElement
27+
target=event.target||event.srcElement;//事件源
28+
console.log(target.nodeName)
29+
};
30+
31+
//下面是动态创建的
32+
var p=document.createElement("p");
33+
document.body.appendChild(p);
34+
p.innerHTML="222312312312";
35+
/*事件委托也可以实现动态绑定*/
36+
/*所有的事件，都可以用事件委托来实现；时间委托是一个高级技巧*/
37+
</script>

‎DOM2/DOM2事件/1、事件基础/5、事件委托应用-N及菜单.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
#menu{width: 400px}
8+
#menu span{display: block;cursor: pointer;}
9+
#menu span.close:before{content: "[+] ";}
10+
#menu span.open:before{content: "[·] ";}
11+
ul li{margin-bottom: 10px; cursor: pointer;}
12+
span ul li{margin-bottom: 10px;}
13+
</style>
14+
</head>
15+
<body>
16+
<ul id="menu">
17+
<li>
18+
<span>第一：1111111</span>
19+
<ul>
20+
<li><span>第一：1111111</span></li>
21+
<li><span>第二：222222</span></li>
22+
<li><span>第三：333333</span></li>
23+
<li><span>第四：444444</span></li>
24+
<li><span>第五：555555</span></li>
25+
<li><span>第六：666666</span></li>
26+
</ul>
27+
</li>
28+
<li>
29+
<span>第二：222222</span>
30+
<ul>
31+
<li><span>第一：1111111</span></li>
32+
<li><span>第二：222222</span></li>
33+
<li><span>第三：333333</span></li>
34+
<li><span>第四：444444</span></li>
35+
<li><span>第五：555555</span></li>
36+
<li><span>第六：666666</span></li>
37+
</ul>
38+
</li>
39+
<li>
40+
<span>第三：333333</span>
41+
<ul>
42+
<li><span>第一：1111111</span></li>
43+
<li><span>第二：222222</span></li>
44+
<li>
45+
<span>第三：333333</span>
46+
<ul>
47+
<li><span>第一：1111111</span></li>
48+
<li><span>第二：222222</span></li>
49+
<li><span>第三：333333</span></li>
50+
<li><span>第四：444444</span></li>
51+
<li><span>第五：555555</span></li>
52+
<li><span>第六：666666</span></li>
53+
</ul>
54+
</li>
55+
<li><span>第四：444444</span></li>
56+
<li><span>第五：555555</span></li>
57+
<li><span>第六：666666</span></li>
58+
</ul>
59+
</li>
60+
<li>
61+
<span>第四：444444</span>
62+
<ul>
63+
<li><span>第一：1111111</span></li>
64+
<li><span>第二：222222</span></li>
65+
<li><span>第三：333333</span></li>
66+
<li><span>第四：444444</span></li>
67+
<li><span>第五：555555</span></li>
68+
<li><span>第六：666666</span></li>
69+
</ul>
70+
</li>
71+
<li>
72+
<span>第五：555555</span>
73+
<ul>
74+
<li><span>第一：1111111</span></li>
75+
<li><span>第二：222222</span></li>
76+
<li><span>第三：333333</span></li>
77+
<li><span>第四：444444</span></li>
78+
<li><span>第五：555555</span></li>
79+
<li><span>第六：666666</span></li>
80+
</ul>
81+
</li>
82+
<li>
83+
<span>第六：666666</span>
84+
<ul>
85+
<li><span>第六：第一：1111111</span></li>
86+
<li><span>第六：第二：222222</span></li>
87+
<li><span>第六：第三：333333</span></li>
88+
<li><span>第六：第四：444444</span></li>
89+
<li><span>第六：第五：555555</span></li>
90+
<li>
91+
<span>第六：第六：666666</span>
92+
<ul>
93+
<li><span>>第六：第六：第一：1111111</span></li>
94+
<li><span>第六：第六：第二：222222</span></li>
95+
<li><span>第六：第六：第三：333333</span></li>
96+
<li><span>第六：第六：第四：444444</span></li>
97+
<li><span>第六：第六：第五：555555</span></li>
98+
<li><span>第六：第六：第六：666666</span></li>
99+
</ul>
100+
</li>
101+
</ul>
102+
</li>
103+
</ul>
104+
</body>
105+
</html>
106+
<script>
107+
var oSpans=document.getElementById("menu").getElementsByTagName("span");
108+
for(var i=0;i<oSpans.length;i++){
109+
var oSapn=oSpans[i];
110+
var oUl=getNext(oSapn);
111+
if(oUl&&oUl.nodeName==="UL"){
112+
oUl.style.display="none";
113+
oSapn.style.backgroundColor="orange";
114+
oSapn.className="close"
115+
}else{
116+
oSapn.style.backgroundColor="#CCC";
117+
}
118+
119+
}
120+
document.getElementById("menu").onclick=function(event){
121+
event=event||window.event;
122+
var target=event.target||event.srcElement;
123+
if(target.nodeName=="SPAN"){
124+
var oUl=getNext(target);
125+
if(oUl&&oUl.nodeName=="UL"){
126+
if(oUl.style.display=="none"){
127+
oUl.style.display="block";
128+
target.className="open"
129+
}else{
130+
oUl.style.display="none";
131+
target.className="close";
132+
/*解决顶级关闭然后打开；第二级和第三级处于打开状态的bug*/
133+
if(oUl.getElementsByTagName("UL")){
134+
var oUls=oUl.getElementsByTagName("UL");
135+
for(var i=0;i<oUls.length;i++){
136+
getPre(oUls[i]).className="close";
137+
oUls[i].style.display="none";
138+
}
139+
}
140+
}
141+
}
142+
}
143+
};
144+
145+
function getNext(curEle) {//下一个弟弟节点，第一个弟弟节点；
146+
if ("getElementsByClassName" in window) {
147+
return curEle.nextElementSibling;
148+
}
149+
var next = curEle.nextSibling;
150+
while (next && next.nodeType !== 1) {
151+
next = next.nextSibling;
152+
}
153+
return next;
154+
};
155+
function getPre(curEle) {//上一个哥哥节点；
156+
if ("getElementsByClassName" in window) {
157+
return curEle.previousElementSibling;
158+
}
159+
var pre = curEle.previousSibling;
160+
while (pre && pre.nodeType !== 1) {
161+
pre = pre.previousSibling;
162+
}
163+
return pre;
164+
}
165+
</script>

‎DOM2/DOM2事件/1、事件基础/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
#事件基础
2+
3+
**事件是什么**：就是一件事，包括硬件的一些行为；
4+
5+
- click
6+
- mouseover
7+
- mouseout
8+
- keydown
9+
- keyup
10+
11+
**什么是绑定**：事件监听；
12+
13+
**具体某一个事件和事件整体的区别**：一件事，和一套事件系统
14+
15+
**什么是事件对象**：实现事件系统，事件的机制，浏览器自己有一套机制；类似人的神经系统，这个内置第机制就是事件对象；
16+
17+
18+
事件演示：
19+
> var oDiv=document.getElementById("div1");
20+
oDiv.onmousemove=function(event){
21+
//直接把一个方法赋值给一个事件属性.这个方法运行的时候，浏览器会自动的给这个方法传一个对象；这个对象就是事件对象；
22+
event=event||window.event;//IE下的事件对象，是一个全局的event；这种的是兼容写法；
23+
event.clientX;//鼠标的X轴坐标；
24+
event.clientY;//鼠标的Y轴坐标；
25+
//时间有即时行；
26+
event.type;//事件类型；只和当时发生的类型有关；只能同时处理一个事件；
27+
this.innerHTML="X:"+event.clientX+" Y："+event.clientY;
28+
};
29+
document.documentElement.onkeydown= function (event) {
30+
event=event||window.event;
31+
oDiv.innerHTML=event.keyCode;
32+
}
33+
34+
35+
//pageX;pageY;鼠标距离文档(当前页面的)最上角的距离；不支持IE678;
36+
//clientX;clientY;指的是浏览器；
37+
//onmouseover和onmouseenter区别；over会传播，enter是不传播的；
38+
//onmouseout和onmouselive区别；
39+
40+
取消冒泡的方法；
41+
42+
> //阻止事件传播/冒泡的方法；
43+
this.appendChild(ele);
44+
ele.onmouseover=function(event){
45+
event=event||window.event;
46+
if(event.stopPropagation){
47+
event.stopPropagation();//标准留言器中禁止冒泡；
48+
// preventDefault中文意思是阻止默认行为；
49+
}else{
50+
e.cancelBubble=true;//IE浏览器禁止冒泡；IE678
51+
}
52+
}
53+
54+
55+
onmouseenter的优势；
56+
> // onmouseover和onmouseenter很像，但是可以避免；onmouseover的一些问题；
57+
// 如果是从父元素到子元素，不会触发onmouseover;
58+
// 如果是从子元素到父元素，也不会触发onmouseover；
59+
60+
事件的冒泡和捕获
61+
62+
> function fn(){
63+
console.log(this.nodeName)
64+
}
65+
eles=document.documentElement.getElementsByTagName("*");
66+
for(var i=0;i<eles.length;i++){
67+
//eles[i].addEventListener("click",fn,false);//SPAN、LI、UL、DIV、BODY
68+
eles[i].addEventListener("click",fn,true);//BODY、DIV、UL、LI、SPAN
69+
}
70+
71+
72+
冒泡和捕获是事件的两个阶段，我们可以在不同阶段来绑定(监听)处理方法；
73+
如果用false是冒泡，如果是true是捕获；
74+
一般都是用false来处理的
75+
76+
事件委托：
77+
> document.documentElement.onclick=function(event){
78+
event=event||window.event;
79+
//事件源委托给documentElement
80+
target=event.target||event.srcElement;//事件源
81+
console.log(target.nodeName)
82+
}
83+
下面是具体应用
84+
85+
> document.documentElement.onclick=function(event){
86+
event=event||window.event;
87+
//事件源委托给documentElement
88+
target=event.target||event.srcElement;//事件源
89+
console.log(target.nodeName)
90+
};
91+
//下面是动态创建的
92+
var p=document.createElement("p");
93+
document.body.appendChild(p);
94+
p.innerHTML="222312312312";
95+
/*事件委托也可以实现动态绑定*/
96+
/*所有的事件，都可以用事件委托来实现；时间委托是一个高级技巧*/

‎DOM2/DOM2事件/1、事件基础/事件捕获.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
9+
</body>
10+
</html>

0 commit comments

Comments
 (0)