JavaScript之事件处理详解,JS中度融合入门笔记

By admin in 4858美高梅 on 2019年4月3日

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>JS2</title>
<style type=”text/css”>
#d1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;

初稿出处:
aitangyong   

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>登6页面的拖拽作用实现</title>
</head>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.dialog{
width: 380px;
height: auto;
position:fixed;
z-index: 1000;
border: 1px solid #d5d5d5;
background-color:#fff;
display: none;
}
.diatitle{
height: 48px;
line-height: 40px;
text-align: center;
color:#535353;
background-color: #f5f5f5;
}
.diacontent{
padding: 15px 20px;
}
.close{
font-size: 20px;
float: right;
margin-right: 20px;
}
#txt{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#pwd{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#btn{
display: block;
width:80px;
height: 40px;
margin:0 auto;
background-color: #CCCCCC;
border:none;
outline-style: none;
}
.mask{
background-color:#000000;
opacity: 0.4;
filter:Alpha(opacity=40);
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
</style>
<body style=”height:1500px”>
JavaScript之事件处理详解,JS中度融合入门笔记。<div class=”dialog” id=”dialog”>
<div class=”diatitle” id=”diatitle”>
登陆页
<a href=”#” class=”close”>×</a>
</div>
<div class=”diacontent” id=”diacontent”>
<form action=”fsaf” method=”post”>
<input type=”text” name=”” id=”txt” placeholder=”请输入账号” />
<input type=”password” name=”” id=”pwd” placeholder=”请输入密码”
/>
<div id=”” style=”text-align:right;font-size: 12px;”>
<a href=”#”>忘记密码</a>
</div>
<input type=”button” name=”” id=”btn” value=”登陆” />
<div id=”” style=”text-align:right;font-size: 12px;”>
<a href=”#”>立刻登记</a>
</div>
</form>
</div>
</div>
<div class=”mask”>

原来的书文出处:
clearbug   

transition-delay: 0s;
transition-duration: 6s;
transition-timing-function: linear;
transition-property:all;
}
</style>
</head>
<body>

抽空学习了下javascript和jquery的轩然大波设计,收获颇大,总计此贴,和我们大快朵颐。

</div>
<div id=”login”>
点击弹出登陆图层
</div>
</body>
<script type=”text/javascript”>
window.onload=function(){
var close=document.getElementsByClassName(“close”)[0];
var dialog=document.getElementById(“dialog”);
var diatitle=document.getElementById(“diatitle”);
var diacontent=document.getElementById(“diacontent”);
var mask=document.getElementsByClassName(“mask”)[0];
var isDraging=false; //是或不是可拖拽的标记
diatitle.onmousedown=down;
document.onmousemove=move;
document.onmouseup=up;
var login=document.getElementById(“login”);
login.onclick=function(){
dialog.style.display=”block”;
mask.style.display=”block”;
}
//自动居中-登陆浮层
close.onclick=function(){
dialog.style.display=”none”;
mask.style.display=”none”;
}

一.轩然大波传播机制

<div style=”border: solid 5px blue;”>
<div style=”height: 50px;”></div>
<div id=”aa”></div>
</div>
<textarea id=”t”></textarea>
<button id=”btn”>点一下</button>

(一)事件绑定的二种艺术

javascript给DOM绑定事件处理函数总的来说有二种情势:在html文书档案中绑定、在js代码中绑定。上面包车型客车窍门壹、格局2属于在html中绑定事件,方式叁、格局四和办法5属于在js代码中绑定事件,其中措施5是最推荐的做法。

方式1:

HTML的DOM成分支持onclick、onblur等以on初步属性,大家能够直接在那些属性值中编辑javascript代码。当点击div的时候,上边包车型地铁代码会弹出div的ID:

XHTML

<div id=”outestA” onclick=”var id = this.id;alert(id);return
false;”></div>

1
<div id="outestA" onclick="var id = this.id;alert(id);return false;"></div>  

那种做法很显眼倒霉,因为代码皆以身处字符串里的,无法格式化和排版,当代码很多的时候非常不雅观懂。那里有一些值得提明:onclick属性中的this代表的是时下被点击的DOM对象,所以大家能够透过this.id获取DOM成分的id属性值。

方式2:

当代码相比多的时候,大家能够在onclick等品质中钦点函数名。

跟下面的做法相比,那种做法略好有的。值得说的是:事件处理函数中的this代表的是window对象,所以咱们在onclick属性值中,通过this将dom对象作为参数字传送递。

JavaScript

<script> function buttonHandler(thisDom) {
alert(this.id);//undefined alert(thisDom.id);//outestA return false; }
</script> <div id=”outestA” onclick=”return
buttonHandler(this);”></div>

1
2
3
4
5
6
7
8
9
10
<script>
 
function buttonHandler(thisDom)
{
alert(this.id);//undefined
alert(thisDom.id);//outestA
return false;
}
</script>
<div id="outestA" onclick="return buttonHandler(this);"></div>

方式3:在JS代码中通过dom成分的onclick等性能

JavaScript

var dom = document.getElementById(“outestA”); dom.onclick =
function(){alert(“1=” + this.id);}; dom.onclick = function(){alert(“2=”

  • this.id);};
1
2
3
var dom = document.getElementById("outestA");
dom.onclick = function(){alert("1=" + this.id);};
dom.onclick = function(){alert("2=" + this.id);};

那种做法this代表当前的DOM对象。还有少数:那种做法只好绑定2个事件处理函数,前边的会覆盖前面包车型地铁。

方式4:IE下使用attach伊芙nt/detach伊夫nt函数进行事件绑定和撤废。

attach伊芙nt/detach伊芙nt包容性不佳,IE陆~IE11都帮忙该函数,但是FF和Chrome浏览器都不援救该办法。而且attach伊芙nt/detach伊夫nt不是W3C标准的做法,所以不推荐应用。在IE浏览器下,attach伊芙nt有以下特征。

a) 事件处理函数中this代表的是window对象,不是dom对象。

JavaScript

var dom = document.getElementById(“outestA”);
dom.attachEvent(‘onclick’,a); function a() { alert(this.id);//undefined
}

1
2
3
4
5
6
7
var dom = document.getElementById("outestA");  
dom.attachEvent(‘onclick’,a);  
      
function a()  
{  
    alert(this.id);//undefined  
}

b) 同多个事件处理函数只可以绑定一遍。

JavaScript

var dom = document.getElementById(“outestA”);
dom.attachEvent(‘onclick’,a); dom.attachEvent(‘onclick’,a); function a()
{ alert(this.id); }

1
2
3
4
5
6
7
var dom = document.getElementById("outestA");  
dom.attachEvent(‘onclick’,a);  
dom.attachEvent(‘onclick’,a);    
function a()  
{  
    alert(this.id);
}

固然接纳attach伊夫nt绑定了壹回,可是函数a只会调用2回。

c)今非昔比的函数对象,可以另行绑定,不会覆盖。

JavaScript

var dom = document.getElementById(“outestA”);
dom.attach伊芙nt(‘onclick’,function(){alert(1);});
dom.attach伊夫nt(‘onclick’,function(){alert(一);}); //
当outestA的click事件产生时,会弹出三个对话框

1
2
3
4
5
var dom = document.getElementById("outestA");  
dom.attachEvent(‘onclick’,function(){alert(1);});  
dom.attachEvent(‘onclick’,function(){alert(1);});  
 
// 当outestA的click事件发生时,会弹出2个对话框

匿名函数和匿名函数是相互不平等的,固然代码完全1样。所以只要大家想用detach伊夫nt撤销attach伊夫nt绑定的事件处理函数,那么绑定事件的时候不能够使用匿名函数,须要求将事件处理函数单独写成二个函数,不然不能收回。

方式5:使用W3C标准的addEventListener和removeEventListener。

那1个函数是W3C标准规定的,FF和Chrome浏览器都协理,IE6/IE7/IE八都不支持那3个函数。可是从IE九起先就协理了这些正经的API。

JavaScript

// type:事件类型,不含”on”,比如”click”、”mouseover”、”keydown”; //
而attachEvent的风浪名称,含含”on”,比如”onclick”、”onmouseover”、”onkeydown”;
// listener:事件处理函数 //
useCapture是事件冒泡,照有趣的事件捕获,默许false,代表事件冒泡类型
add伊芙ntListener(type, listener, useCapture);

1
2
3
4
5
// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型
addEventListener(type, listener, useCapture);

* *

a)
事件处理函数中this代表的是dom对象,不是window,这么些天性与attach伊夫nt不一样。

JavaScript

var dom = document.getElementById(“outestA”);
dom.addEventListener(‘click’, a, false); function a() {
alert(this.id);//outestA }

1
2
3
4
5
6
7
var dom = document.getElementById("outestA");  
dom.addEventListener(‘click’, a, false);  
      
function a()  
{  
    alert(this.id);//outestA  
}

b) 同贰个事件处理函数能够绑定3遍,一遍用于事件捕获,1回用于事件冒泡。

JavaScript

var dom = document.getElementById(“outestA”);
dom.addEventListener(‘click’, a, false); dom.addEventListener(‘click’,
a, true); function a() { alert(this.id);//outestA } //
当点击outestA的时候,函数a会调用2次

1
2
3
4
5
6
7
8
9
10
var dom = document.getElementById("outestA");  
dom.addEventListener(‘click’, a, false);  
dom.addEventListener(‘click’, a, true);  
      
function a()  
{  
    alert(this.id);//outestA  
}
 
// 当点击outestA的时候,函数a会调用2次

若是绑定的是同2个事件处理函数,并且都以事件冒泡类型或然事件捕获类型,那么只可以绑定三遍。

JavaScript

var dom = document.getElementById(“outestA”);
dom.add伊芙ntListener(‘click’, a, false); dom.add伊夫ntListener(‘click’,
a, false); function a() { alert(this.id);//outestA } //
当点击outestA的时候,函数a只会调用3次

1
2
3
4
5
6
7
8
9
10
var dom = document.getElementById("outestA");  
dom.addEventListener(‘click’, a, false);  
dom.addEventListener(‘click’, a, false);  
      
function a()  
{  
    alert(this.id);//outestA  
}
 
// 当点击outestA的时候,函数a只会调用1次

c) 分歧的事件处理函数能够另行绑定,那几个特点与attach伊夫nt壹致。

//登陆层居中
autoCenter();
function autoCenter(){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = dialog.offsetWidth;
var elH = dialog.offsetHeight;
dialog.style.left = ((bodyW-elW)/2-190) + ‘px’;
dialog.style.top = ((bodyH-elH)/2-80) + ‘px’;
}
//遮罩层
fillToBody();
function fillToBody(){
mask.style.width = document.documentElement.clientWidth +’px’;
mask.style.height = document.documentElement.clientHeight + ‘px’;
}
按下
function down(){
diatitle.style.cursor=”move”;
isDraging=true;
objleft=dialog.offsetLeft;
objtop=dialog.offsetTop;
posX = parseInt(mousePosition(event).x)
posY = parseInt(mousePosition(event).y);
offsetX=posX-objleft;
offsetY=posY-objtop;
}
//移动
function move(event) {
if (isDraging == true) {
var x=mousePosition(event).x-offsetX;
var y=mousePosition(event).y-offsetY;
var w = document.documentElement.clientWidth – dialog.offsetWidth;
var h = document.documentElement.clientHeight – dialog.offsetHeight;
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
dialog.style.left = x + ‘px’;
dialog.style.top = y + ‘px’;
}
}
//松开
function up() {
isDraging= false;
}
function mousePosition(evt){
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft –
document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop –
document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
}
</script>
</html>

客户端JavaScript程序(正是浏览器啦)采纳了异步事件驱动编制程序模型。当文书档案、浏览器、元素或与之有关的靶子爆发壹些有趣的政工作时间,Web浏览器就会发出事件(event)。若是JavaScript应用程序关心特定项目标风云,那么它能够挂号当那类事件时有发生时要调用的叁个或几个函数。当然了,那种风格并非Web编程独有,全部应用图形用户界面包车型客车应用程序都选拔了它。

<div id=”dd”></div>
<div id=”d1″></div>

(2)事件处理函数的执行顺序

措施1、方式2和艺术叁都不可能完结事件的双重绑定,所以本来也就不设有执行顺序的题材。形式四和方法5方可另行绑定性情,所以须要精通下实施顺序的难点。要是您写出注重于实践各类的代码,能够看清你的筹划存在难题。所以下边包车型地铁逐条难题,仅看成兴趣研究,未有怎么实际意义。直接上敲定:add伊芙ntListener和attach伊芙nt表现1致,要是给同1个风浪绑定八个处理函数,先绑定的先实行。上边包车型地铁代码笔者在IE1一、FF17和Chrome3玖都测试过。

XHTML

<script> window.onload = function(){ <span
style=”white-space:pre”> </span>var outA =
document.getElementById(“outA”);
outA.addEventListener(‘click’,function(){alert(1);},false);
outA.addEventListener(‘click’,function(){alert(2);},true);
outA.addEventListener(‘click’,function(){alert(3);},true);
outA.addEventListener(‘click’,function(){alert(4);},true); };
</script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
window.onload = function(){
<span style="white-space:pre"> </span>var outA = document.getElementById("outA");  
outA.addEventListener(‘click’,function(){alert(1);},false);
outA.addEventListener(‘click’,function(){alert(2);},true);
outA.addEventListener(‘click’,function(){alert(3);},true);
outA.addEventListener(‘click’,function(){alert(4);},true);
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
</div>
</body>

当点击outA的时候,会相继打字与印刷出1、贰、三、4。那Ritter别供给专注:我们给outA绑定了多少个onclick事件处理函数,也是一贯点击outA触发的轩然大波,所以不涉及事件冒泡和事件捕获的难点,即add伊芙ntListener的第多个参数在那种场地下,没有怎么用处。比方是由此事件冒泡或许是事件捕获触发outA的click事件,那么函数的施行各类会有生成

4858美高梅 1

既然如此要详解事件处理,那大家先从多少个基础概念提及呢:

<script type=”text/javascript”>
//距离难点
var a = document.getElementById(‘aa’);
console.dir(a);

(叁) 事件冒泡和事件捕获

事件冒泡和事件捕获很好精晓,只可是是对相同件工作的不等观点,只可是那2种意见都很有道理。

小编们通晓HTML中的成分是可以嵌套的,形成类似于树的层系关系。比如上面包车型客车代码:

4858美高梅,XHTML

<div id=”outA” style=”width:400px; height:400px;
background:#CDC9C9;position:relative;”> <div id=”outB”
style=”height:200; background:#0000ff;top:100px;position:relative;”>
<div id=”outC” style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div>

1
2
3
4
5
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>

倘若点击了最内侧的outC,那么外侧的outB和outC算不算被点击了呢?很了然算,否则就从未须要区分事件冒泡和事件捕获了,那或多或少相继浏览器厂家也并未有何样疑义。要是outA、outB、outC都登记了click类型事件处理函数,当点击outC的时候,触发顺序是A–>B–>C,依然C–>B–>A呢?假若浏览器选取的是事件冒泡,那么触发顺序是C–>B–>A,由内而外,像气泡壹样,从水底浮向水面;若是使用的是事件捕获,那么触发顺序是A–>B–>C,从上到下,像石头同样,从水面落入水底。

事件冒泡见下图:

4858美高梅 2

事件捕获见下图:

4858美高梅 3

一般的话事件冒泡机制,用的更加多一些,所以在IE八以及从前,IE只支持事件冒泡。IE玖+/FF/Chrome那二种模型都帮衬,能够因此add伊芙ntListener((type,
listener,
useCapture)的useCapture来设定,useCapture=false代表着事件冒泡,useCapture=true代表着采取事件捕获。

XHTML

<script> window.onload = function(){ var outA =
document.getElementById(“outA”); var outB =
document.getElementById(“outB”); var outC =
document.getElementById(“outC”); // 使用事件冒泡
outA.add伊芙ntListener(‘click’,function(){alert(1);},false);
outB.add伊芙ntListener(‘click’,function(){alert(二);},false);
outC.add伊夫ntListener(‘click’,function(){alert(叁);},false); };
</script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> <div
id=”outB” style=”height:200;
background:#0000ff;top:100px;position:relative;”> <div id=”outC”
style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
 
window.onload = function(){
var outA = document.getElementById("outA");  
var outB = document.getElementById("outB");  
var outC = document.getElementById("outC");  
// 使用事件冒泡
outA.addEventListener(‘click’,function(){alert(1);},false);
outB.addEventListener(‘click’,function(){alert(2);},false);
outC.addEventListener(‘click’,function(){alert(3);},false);
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>

选拔的是事件冒泡,当点击outC的时候,打字与印刷顺序是叁–>二–>一。假若将false改成true使用事件捕获,打字与印刷顺序是一–>二–>三。

 

1事件类型(event
type):是多个用于表达爆发什么类型事件的字符串。例如,“mousemove”表示用户移动鼠标,“keydown”表示键盘上某些键被按下。事件类型只是2个字符串,有时候又称为事件名字(event
name);

//clientHeight = 内边距 + height(实际尺寸) 不含滚动轴的幅度
//offsetHeight = 内边距 + height + 边框宽度
//scrollHeight =
倘诺滚动条出现,则是可滚动的终极高度。若是未有滚动条,中度和clientHeight一样
a.clientHeight;
a.clientWidth;
a.offsetWidth;
a.offsetHeight;
a.offsetTop;
a.clientTop

(四) DOM事件流

DOM事件流作者也不明了怎么解释,个人感觉就是事件冒泡和事件捕获的结合体,直接看图吧。

4858美高梅 4

DOM事件流:将事件分为多个级次:捕获阶段、指标阶段、冒泡阶段。先调用捕获阶段的处理函数,其次调用指标阶段的处理函数,最终调用冒泡阶段的处理函数。这么些进程很接近于Struts贰框中的action和Interceptor。当发出贰个U奔驰G级L请求的时候,先调用前置拦截器,其次调用action,最终调用后置拦截器。

XHTML

<script> window.onload = function(){ var outA =
document.getElementById(“outA”); var outB =
document.getElementById(“outB”); var outC =
document.getElementById(“outC”); //
指标(本身触发事件,是冒泡还是捕获无所谓)
outC.add伊夫ntListener(‘click’,function(){alert(“target”);},true); //
事件冒泡
outA.add伊夫ntListener(‘click’,function(){alert(“bubble一”);},false);
outB.add伊夫ntListener(‘click’,function(){alert(“bubble贰”);},false); //
事件捕获
outA.add伊夫ntListener(‘click’,function(){alert(“capture一”);},true);
outB.add伊夫ntListener(‘click’,function(){alert(“capture二”);},true); };
</script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> <div
id=”outB” style=”height:200;
background:#0000ff;top:100px;position:relative;”> <div id=”outC”
style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
 
window.onload = function(){
var outA = document.getElementById("outA");  
var outB = document.getElementById("outB");  
var outC = document.getElementById("outC");  
// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener(‘click’,function(){alert("target");},true);
// 事件冒泡
outA.addEventListener(‘click’,function(){alert("bubble1");},false);
outB.addEventListener(‘click’,function(){alert("bubble2");},false);
// 事件捕获
outA.addEventListener(‘click’,function(){alert("capture1");},true);
outB.addEventListener(‘click’,function(){alert("capture2");},true);
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>

当点击outC的时候,依次打字与印刷出capture一–>capture贰–>target–>bubble2–>bubble一。到那里是或不是足以知道add伊芙ntListener(type,handler,useCapture)那么些API中第多少个参数useCapture的含义呢?useCapture=false意味着:将事件处理函数参预到冒泡阶段,在冒泡阶段会被调用;useCapture=true意味着:将事件处理函数参与到捕获阶段,在破获阶段会被调用。从DOM事件流模型能够见到,捕获阶段的事件处理函数,一定比冒泡阶段的事件处理函数先实行。

2轩然大波指标(event
target):是发出事件或与之相关的对象。Window、Document和Element对象是最普遍的风浪目的。当然,AJAX中的XMLHttpRequest对象也是二个轩然大波目的;

a.scrollTop;

(伍) 再谈事件函数执行先后顺序

在DOM事件流中提到过:

JavaScript

// 指标(本身触发事件,是冒泡依然捕获无所谓)
outC.add伊夫ntListener(‘click’,function(){alert(“target”);},true);

1
2
// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener(‘click’,function(){alert("target");},true);

我们在outC上触发onclick事件(那么些是目的对象),假设我们在outC上还要绑定捕获阶段/冒泡阶段事件处理函数会怎样呢?

XHTML

<script> window.onload = function(){ var outA =
document.getElementById(“outA”); var outB =
document.getElementById(“outB”); var outC =
document.getElementById(“outC”); //
目的(本人触发事件,是冒泡依然捕获无所谓)
outC.add伊夫ntListener(‘click’,function(){alert(“target二”);},true);
outC.add伊芙ntListener(‘click’,function(){alert(“target①”);},true); //
事件冒泡
outA.add伊芙ntListener(‘click’,function(){alert(“bubble壹”);},false);
outB.add伊芙ntListener(‘click’,function(){alert(“bubble贰”);},false); //
事件捕获
outA.add伊芙ntListener(‘click’,function(){alert(“capture一”);},true);
outB.add伊夫ntListener(‘click’,function(){alert(“capture二”);},true); };
</script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> <div
id=”outB” style=”height:200;
background:#0000ff;top:100px;position:relative;”> <div id=”outC”
style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
 
window.onload = function(){
var outA = document.getElementById("outA");  
var outB = document.getElementById("outB");  
var outC = document.getElementById("outC");  
// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener(‘click’,function(){alert("target2");},true);
outC.addEventListener(‘click’,function(){alert("target1");},true);
// 事件冒泡
outA.addEventListener(‘click’,function(){alert("bubble1");},false);
outB.addEventListener(‘click’,function(){alert("bubble2");},false);
// 事件捕获
outA.addEventListener(‘click’,function(){alert("capture1");},true);
outB.addEventListener(‘click’,function(){alert("capture2");},true);
 
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>

点击outC的时候,打字与印刷顺序是:capture一–>capture二–>target2–>target1–>bubble2–>bubble壹。由于outC是大家接触事件的指标对象,在outC上登记的事件处理函数,属于DOM事件流中的靶子阶段。指标阶段函数的履行顺序:先注册的先实施,后注册的后执行。这就是下边大家说的,在目的对象上绑定的函数是选取捕获,依然采纳冒泡,都尚未怎么关系,因为冒泡和破获只是对父成分上的函数执行顺序有震慑,对友好并未有啥样震慑。倘诺不信,能够将上边包车型大巴代码放进去验证。

JavaScript

// 目的(自己触发事件,是冒泡照旧捕获无所谓)
outC.add伊芙ntListener(‘click’,function(){alert(“target一”);},false);
outC.add伊芙ntListener(‘click’,function(){alert(“target贰”);},true);
outC.add伊芙ntListener(‘click’,function(){alert(“target三”);},true);
outC.add伊夫ntListener(‘click’,function(){alert(“target肆”);},false);

1
2
3
4
5
// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener(‘click’,function(){alert("target1");},false);
outC.addEventListener(‘click’,function(){alert("target2");},true);
outC.addEventListener(‘click’,function(){alert("target3");},true);
outC.addEventListener(‘click’,function(){alert("target4");},false);

时到现在日我们能够提交事件函数执行种种的定论了:破获阶段的处理函数开端执行,其次是指标阶段的处理函数,最终是冒泡阶段的处理函数。目的阶段的处理函数,先注册的先实施,后注册的后实施

叁事件处理程序(event
handler):是拍卖或响应事件的函数,它也叫事件监听程序(event
listener)。应用程序通过指明事件类型和事件目的,在Web浏览器中注册它们的事件处理函数。

a.scrollWidth;
a.scrollHeight;

(6) 阻止事件冒泡和破获

私下认可情况下,八个事件处理函数会依照DOM事件流模型中的顺序执行。假设子成分上发出某些事件,不须要履行父成分上注册的事件处理函数,那么我们能够告1段落捕获和冒泡,防止未有意思的函数调用。后面提到的多样事件绑定格局,都能够完毕拦阻事件的传播。由于第肆种情势,是最推荐的做法。所以我们根据第4种办法,看看哪些堵住事件的流传行为。IE8以及在此之前可以透过 window.event.cancelBubble=true阻止事件的持续散播;IE九+/FF/Chrome通过event.stopPropagation()阻止事件的后续散布。

XHTML

<script> window.onload = function(){ var outA =
document.getElementById(“outA”); var outB =
document.getElementById(“outB”); var outC =
document.getElementById(“outC”); // 目的outC.add伊芙ntListener(‘click’,function(event){ alert(“target”);
event.stopPropagation(); },false); // 事件冒泡
outA.add伊夫ntListener(‘click’,function(){alert(“bubble”);},false); //
事件捕获
outA.add伊夫ntListener(‘click’,function(){alert(“capture”);},true); };
</script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> <div
id=”outB” style=”height:200;
background:#0000ff;top:100px;position:relative;”> <div id=”outC”
style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
 
window.onload = function(){
var outA = document.getElementById("outA");  
var outB = document.getElementById("outB");  
var outC = document.getElementById("outC");  
// 目标
outC.addEventListener(‘click’,function(event){
alert("target");
event.stopPropagation();
},false);
 
// 事件冒泡
outA.addEventListener(‘click’,function(){alert("bubble");},false);
 
// 事件捕获
outA.addEventListener(‘click’,function(){alert("capture");},true);
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>

当点击outC的时候,之后打字与印刷出capture–>target,不会打字与印刷出bubble。因为当事件传播到outC上的处理函数时,通过stopPropagation阻止了风浪的存在延续散布,所以不会一连散布到冒泡阶段。

最后再看1段更幽默的代码:

XHTML

<script> window.onload = function(){ var outA =
document.getElementById(“outA”); var outB =
document.getElementById(“outB”); var outC =
document.getElementById(“outC”); // 目的outC.addEventListener(‘click’,function(event){alert(“target”);},false);
// 事件冒泡
outA.add伊夫ntListener(‘click’,function(){alert(“bubble”);},false); //
事件捕获
outA.add伊芙ntListener(‘click’,function(){alert(“capture”);event.stopPropagation();},true);
}; </script> <body> <div id=”outA” style=”width:400px;
height:400px; background:#CDC9C9;position:relative;”> <div
id=”outB” style=”height:200;
background:#0000ff;top:100px;position:relative;”> <div id=”outC”
style=”height:100px;
background:#FFB90F;top:50px;position:relative;”></div>
</div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
 
window.onload = function(){
var outA = document.getElementById("outA");  
var outB = document.getElementById("outB");  
var outC = document.getElementById("outC");  
// 目标
outC.addEventListener(‘click’,function(event){alert("target");},false);
 
// 事件冒泡
outA.addEventListener(‘click’,function(){alert("bubble");},false);
 
// 事件捕获
outA.addEventListener(‘click’,function(){alert("capture");event.stopPropagation();},true);
};
</script>
 
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>

实施结果是只打字与印刷capture,不会打字与印刷target和bubble。神奇吗,我们点击了outC,然而却从没触发outC上的事件处理函数,而是触发了outA上的事件处理函数。原因不做解释,要是你还不明了,能够再读1遍本作品。

5 赞 33 收藏 3
评论

肆风波目的(event
object):是与一定事件有关且带有关于该事件详细音讯的目的。事件指标作为参数字传送递给事件处理函数(不过在IE八以及其此前版本中,全局变量event才是事件指标)。事件指标都有用来钦定事件类型(event
type)的type属性和点名事件指标(event
target)的target属性(不过在IE捌以及其以前版本中,用的是srcElement而非target)。当然,分歧类别的事件还会为其有关事件指标定义壹些别样的独有属性。例如,鼠标事件的连带对象会蕴藏鼠标指针的坐标,而键盘事件的连锁对象会含有按下的键和扶助键的详细新闻。

//鼠标的离开
//鼠标点击事件时有发生的时候”点击点”距离浏览器左上角的距离
//假使有滚动距离,该距离不含滚动距离,知识相对看到的区域左上角的岗位
var i = document.getElementById(‘dd’);
i.onclick = function (xxx) {
event.clientX;
event.clientY;

上述说完了多个基本概念。那么难题来了——假如在多少个web页面上用鼠标点击二个元素a的某1子成分b时,应该先实行子成分b注册的事件处理程序照旧先实施成分a注册的事件处理程序吗(假若成分a和它的子成分b都有注册事件处理程序)?身为读者的你是否想过这些难点啊?

event.pageX;
event.pageY;

这几个难点就涉嫌到浏览器中的事件传播(event
propagation)机制。相信我们都听新闻说过事件冒泡(event
bubble)和事件捕获(event
capturing)吧!没有错,它们就是浏览器中的事件传播机制。无图无真相,没有配图?这怎么阔以:

event.target;
event.toElement;
}

4858美高梅 5

//按键事件及按键判断
document.onkeydown = function(){
var d1 = document.getElementById(‘d1’);

看了图之后相信你已经大致知道了浏览器中的事件传播机制了:当2个风浪时有暴发时,它会先从浏览器一流对象Window一路向下传递,平昔传递到触发那些事件的那2个成分,那也正是事件捕获进程。可是,1切并不曾结束,事件又从那一个因素一路进步传递到Window对象,那也等于事件冒泡进度(可是在IE八以及其在此之前版本中,事件模型未有定义捕获进度,只有冒泡过程)。

if (event.key == ‘d’) {
d1.style.left = d1.offsetLeft + 100 + ‘px’;
}

所以,关于地方的难点,还得看元素a注册的事件处理程序是在捕获进程大概在冒泡进度了。那么毕竟哪些是在抓获进度注册事件处理程序,在冒泡进度注册事件处理程序又是怎么做的吗?这就得不错说说两种注册事件处理程序的措施了:

if (event.key == ‘a’) {
d1.style.left = d1.offsetLeft – 100 + ‘px’;
}

一. 安装HTML标签属性为事件处理程序

if (event.key == ‘s’) {
d1.style.top = d1.offsetTop + 100 + ‘px’;
}

文档成分的事件处理程序属性,其名字由“on”前边随着事件名组成,例如:onclick、onmouseover。当然了,那种样式只可以为DOM成分注册事件处理程序。实例:

if (event.key == ‘w’) {
d1.style.top = d1.offsetTop – 100 + ‘px’;
}
}

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green;
overflow:hidden;} #div3{margin:50px auto; width: 100px; height: 100px;
background: blue;} </style> </head> <body> <div
id=”div1″ onClick=”console.log(‘div1’);”>div1 <div id=”div2″
oNClick=”console.log(‘div2’);”>div2 <div id=”div3″
onclick=”console.log(‘div3’);” onclick=”console.log(‘div3333’);”>div3
</div> </div> </div> <script
type=”text/javascript”> </script> </body> </html>

//JS有三种流:捕获流和冒泡流
//捕获流:最外层起始接收的轩然大波,然后逐级向下传播,知道传到具体的要素对象上
//冒泡流:最内层(最切实的成分)初步接收到事件,然后逐级提升传播,知道最外层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
        #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
        #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
    </style>
</head>
<body>
    <div id="div1" onClick="console.log(‘div1’);">div1
        <div id="div2" oNClick="console.log(‘div2’);">div2
            <div id="div3" onclick="console.log(‘div3’);" onclick="console.log(‘div3333’);">div3
            </div>
        </div>
     </div>
<script type="text/javascript">
</script>
</body>
</html>

//HTML事件正是事件以及事件的处理程序和html混写在同步
//DOM 0级事件
d1.onclick = f1;
//清楚DOM 0级事件
d1.onclick = null;

结果(鼠标点击div三区域后):

//DOM 2级事件
//能够为3个目的添加五个一样的事件处理程序,执行顺序依照代码先后顺序执行
//参数一:事件类型(不带on)
//参数贰:事件的处理程序
//参数3:表示添加事件的机遇,为true时意味着在抓获阶段添加事件,false表示在冒泡阶段添加事件
d1.addEventListener(‘click’,f1,true);
d1.addEventListener(‘click’,f2,true);
//移出DOM 2级事件处理程序(参数和绑定时的1样)
d1.removeEleventListener(‘click’,f1,true);

4858美高梅 6

//IE事件模型
//添加事变(只在冒泡阶段添加),该方法也足以为三个目的添加多少个相同事件
//参数一:事件类型(带on)
//参数二:事件的处理程序

从结果中得以看出:

d1.attachEvent(‘onclick’,f1);
d1.attachEvent(‘onclick’,f2);
//移除事件
d1.detachEvent(‘onclick’,f1);

一因为HTML里面不区分轻重缓急写,所以那里事件处理程序属性名大写、小写、大小混写均可,属性值正是应和事件处理程序的JavaScript代码;

//包容性处理
//思路:惦记三种浏览器的具体景况,然后统一封装,方便早先时期维护

二若给同1成分写三个onclick事件处理属性,浏览器只实行第多个onclick里面包车型地铁代码,后面包车型大巴会被忽视;

//event事件
var d1 = document.getElementById(‘d1’);
d1.onclick = function(e){
//event对象唯有在事变产生的时候才会生出
//事件指标实际会暗许传入到事件处理程序中
alert(e)

3那种样式是在事件冒泡进程中注册事件处理程序的;

//获取事件的时候,使用那样的操作举行兼容的得到对象方法
}

二.装置JavaScript对象属性为事件处理程序

//幸免事件冒泡
e.stopPropagation();

能够通过安装某一事件指标的事件处理程序属性来为其登记相应的事件处理程序。事件处理程序属性名字由“on”后边随着事件名组成,例如:onclick、onmouseover。实例:

//IE
window.event.cancelBubble = true;

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green;
overflow:hidden;} #div3{margin:50px auto; width: 100px; height: 100px;
background: blue;} </style> </head> <body> <div
id=”div1″>div1 <div id=”div2″>div2 <div id=”div3″>div3
</div> </div> </div> <script
type=”text/javascript”> var div1 = document.getElementById(‘div1’);
var div2 = document.getElementById(‘div2’); var div3 =
document.getElementById(‘div3’);   div1.onclick = function(){
    console.log(‘div1’);   };   div2.onclick = function(){
    console.log(‘div2’);   };   div3.onclick = function(){
    console.log(‘div3’);   };   div1.onclick = function(){
    console.log(‘div11111’);   };   div1.onClick = function(){
    console.log(‘DIV11111’);   }; </script> </body>
</html>

//委托绑定
//利用事件的冒泡性情,将自然该绑定到具体的因素的事件委托给其顶头上司对象举行绑定
var u = document.getElementById(‘u’);
u.addEventListener(‘click’,function(){
console.log(event.target.innerHTML);
console.log(this);
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
        #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
        #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
    </style>
</head>
<body>
    <div id="div1">div1
        <div id="div2">div2
            <div id="div3">div3
            </div>
        </div>
    </div>
<script type="text/javascript">
    var div1 = document.getElementById(‘div1’);
    var div2 = document.getElementById(‘div2’);
    var div3 = document.getElementById(‘div3’);
  div1.onclick = function(){
    console.log(‘div1’);
  };
  div2.onclick = function(){
    console.log(‘div2’);
  };
  div3.onclick = function(){
    console.log(‘div3’);
  };
  div1.onclick = function(){
    console.log(‘div11111’);
  };
  div1.onClick = function(){
    console.log(‘DIV11111’);
  };
</script>
</body>
</html>

//Window对象
window.innerHeight;
window.innerWidth;
window.open();
window.print();
window.close();
window.confirm();
window.prompt();

结果(鼠标点击div三区域后):

window.scrollTo(100,500);

4858美高梅 7

window.name;
window.self;
window.parent;
window.document.(…);
</script>
</body>
</html>

从结果中得以看到:

一因为JavaScript是严谨区分轻重缓急写的,所以,这种方式下属性名只可以按规定小写;

2若给同壹成分对象写七个onclick事件处理属性,前边写的会覆盖前边的(ps:那就是在修改贰个对象属性的值,属性的值是绝无仅有鲜明的);

叁那种样式也是在事件冒泡进度中注册事件处理程序的;

3.addEventListener()

前两种艺术面世在Web最初,众多浏览器都有落到实处。而add伊芙ntListener()方法是正统事件模型中定义的。任何能变成事件指标的靶子——这个目的包蕴Window对象、Document对象和拥有文书档案成分等——都定义了三个叫做add伊芙ntListener()的点子,使用这一个主意可以为事件指标注册事件处理程序。add伊夫ntListener()接受多个参数:第二个参数是要登记处理程序的轩然大波类型,其值是字符串,但并不包涵前缀“on”;第一个参数是指当钦赐项目标风云产生时应当调用的函数;第8个参数是布尔值,其可以忽略(有个别旧的浏览器上不能够忽视这几个参数),暗许值为false。那种情景是在事变冒泡进程中注册事件处理程序。当其为true时,正是在事件捕获进程中登记事件处理程序。实例:

<!DOCTYPE HTML> <html> <head>   <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
  <title>test</title>   <style type=”text/css”>
    #div1{width: 300px; height: 300px; background: red;
overflow:hidden;}     #div2{margin:50px auto; width: 200px; height:
200px; background: green; overflow:hidden;}     #div3{margin:50px
auto; width: 100px; height: 100px; background: blue;}   </style>
</head> <body>   <div id=”div1″>div1     <div
id=”div2″>div2       <div id=”div3″>div3
      </div>     </div>   </div>
<script type=”text/javascript”>   var div1 =
document.getElementById(‘div1’);   var div2 =
document.getElementById(‘div2’);   var div3 =
document.getElementById(‘div3’);   div1.addEventListener(‘click’,
function(){ console.log(‘div1-bubble’); }, false);
  div2.addEventListener(‘click’, function(){
console.log(‘div2-bubble’); }, false);
  div3.addEventListener(‘click’, function(){
console.log(‘div3-bubble’); }, false);
  div3.addEventListener(‘click’, function(){
console.log(‘div3-bubble222’); }, false);
  div1.addEventListener(‘click’, function(){
console.log(‘div1-capturing’); }, true);
  div2.addEventListener(‘click’, function(){
console.log(‘div2-capturing’); }, true);
  div3.addEventListener(‘click’, function(){
console.log(‘div3-capturing’); }, true); </script> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>test</title>
  <style type="text/css">
    #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
    #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
    #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
  </style>
</head>
<body>
  <div id="div1">div1
    <div id="div2">div2
      <div id="div3">div3
      </div>
    </div>
  </div>
<script type="text/javascript">
  var div1 = document.getElementById(‘div1’);
  var div2 = document.getElementById(‘div2’);
  var div3 = document.getElementById(‘div3’);
  div1.addEventListener(‘click’, function(){ console.log(‘div1-bubble’); }, false);
  div2.addEventListener(‘click’, function(){ console.log(‘div2-bubble’); }, false);
  div3.addEventListener(‘click’, function(){ console.log(‘div3-bubble’); }, false);
  div3.addEventListener(‘click’, function(){ console.log(‘div3-bubble222’); }, false);
  div1.addEventListener(‘click’, function(){ console.log(‘div1-capturing’); }, true);
  div2.addEventListener(‘click’, function(){ console.log(‘div2-capturing’); }, true);
  div3.addEventListener(‘click’, function(){ console.log(‘div3-capturing’); }, true);
</script>
</body>
</html>

结果(鼠标点击div三区域后):

4858美高梅 8

从结果中能够看出:

1add伊夫ntListener()第多少个参数的成效比较上边所说;

二透过add伊芙ntListener()方法给1样对象注册四个同品种的事件,并不会生出忽略或掩盖,而是会按梯次依次执行;

争辩add伊芙ntListener()的是removeEventListener()方法,它一律有多少个参数,前八个参数自然跟add伊芙ntListener()的意义1样,而第5个参数也只需跟相应的add伊芙ntListener()的第多少个参数保持一致即可,同样能够简不难单,暗中认可值为false。它表示从目的中删除有个别事件处理函数。实例:

JavaScript

div1.addEventListener(‘click’, div1BubbleFun, false);
div1.removeEventListener(‘click’, div1BubbleFun, false); function
div1BubbleFun(){ console.log(‘div1-bubble’); }

1
2
3
4
5
div1.addEventListener(‘click’, div1BubbleFun, false);
div1.removeEventListener(‘click’, div1BubbleFun, false);
function div1BubbleFun(){
    console.log(‘div1-bubble’);
}

4.attachEvent()

不过,IE八以及其从前版本的浏览器并不支持add伊芙ntListener()和remove伊夫ntListener()。相应的,IE定义了看似的方法attach伊夫nt()和detach伊芙nt()。因为IE八以及其在此以前版本浏览器也不帮衬事件捕获,所以attach伊芙nt()并不能够注册捕获进程中的事件处理函数,由此attach伊夫nt()和detach伊芙nt()须要唯有五个参数:事件类型和事件处理函数。而且,它们的率先个参数使用了带“on”前缀的事件处理程序属性名。实例:

JavaScript

var div1 = document.getElementById(‘div1’); div1.attachEvent(‘onclick’,
div1BubbleFun); function div1BubbleFun(){
  console.log(‘div1-bubble’); }

1
2
3
4
5
var div1 = document.getElementById(‘div1’);
div1.attachEvent(‘onclick’, div1BubbleFun);
function div1BubbleFun(){
  console.log(‘div1-bubble’);
}

相应的,从指标上剔除事件处理程序函数使用detach伊芙nt()。例如:

JavaScript

div1.detachEvent(‘onclick’, div1BubbleFun);

1
div1.detachEvent(‘onclick’, div1BubbleFun);

到此结束,大家已经说了浏览器中事件传播机制以及种种注册事件处理程序的艺术。下边大家就加以说事件处理程序调用时的局地标题啊!

二.事件处理程序的调用

一.事件处理程序的参数:正如前方所说,平常事件目的作为参数字传送递给事件处理函数,但IE捌以及其此前版本的浏览器中全局变量event才是事件目的。所以,大家在写相关代码时应当小心包容性难题。实例(给页面上id为div一的因素添加点击事件,当点击该因素时在决定台出口事件类型和被点击元素自身):

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style> </head> <body> <div
id=”div1″>div1</div> <script type=”text/javascript”> var
div1 = document.getElementById(‘div1’); if(div1.addEventListener){
div1.addEventListener(‘click’, div1Fun, false); }else
if(div1.attachEvent){ div1.attachEvent(‘onclick’, div1Fun); } function
div1Fun(event){ event = event || window.event; var target = event.target
|| event.srcElement; console.log(event.type); console.log(target); }
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <script type="text/javascript">
        var div1 = document.getElementById(‘div1’);
        if(div1.addEventListener){
            div1.addEventListener(‘click’, div1Fun, false);
        }else if(div1.attachEvent){
            div1.attachEvent(‘onclick’, div1Fun);
        }
        function div1Fun(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            console.log(event.type);
            console.log(target);
        }
    </script>
</body>
</html>

 

二.事件处理程序的运行环境:关于事件处理程序的运转条件,也正是在事件处理程序中调用上下文(this值)的针对性难点,能够看下边八个实例。

实例一:

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style> </head> <body> <div id=”div1″
onclick=”console.log(‘html:’); console.log(this);”>div1</div>
<script type=”text/javascript”> </script> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div id="div1" onclick="console.log(‘html:’); console.log(this);">div1</div>
    <script type="text/javascript">
    </script>
</body>
</html>

结果一:

4858美高梅 9

从结果能够看来:

一第二种艺术事件处理程序中this指向那几个成分自己;

实例二:

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style> </head> <body> <div id=”div1″
onclick=”console.log(‘html:’); console.log(this);”>div1</div>
<script type=”text/javascript”> var div1 =
document.getElementById(‘div1’); div1.onclick = function(){
console.log(‘div1.onclick:’); console.log(this); }; </script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div id="div1" onclick="console.log(‘html:’); console.log(this);">div1</div>
    <script type="text/javascript">
        var div1 = document.getElementById(‘div1’);
        div1.onclick = function(){
            console.log(‘div1.onclick:’);
            console.log(this);
        };
    </script>
</body>
</html>

结果二:

4858美高梅 10

从结果能够看来:

1次之种方法事件处理程序中this也本着这几个成分本人;

贰存在第三种方法时,它会覆盖第3种办法注册的事件处理程序;

实例三:

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style> </head> <body> <div id=”div1″
onclick=”console.log(‘html:’); console.log(this);”>div1</div>
<script type=”text/javascript”> var div1 =
document.getElementById(‘div1’); div1.onclick = function(){
console.log(‘div1.onclick:’); console.log(this); };
div1.addEventListener(‘click’, function(){
console.log(‘div1.addEventListener:’); console.log(this); }, false);
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div id="div1" onclick="console.log(‘html:’); console.log(this);">div1</div>
    <script type="text/javascript">
        var div1 = document.getElementById(‘div1’);
        div1.onclick = function(){
            console.log(‘div1.onclick:’);
            console.log(this);
        };
        div1.addEventListener(‘click’, function(){
            console.log(‘div1.addEventListener:’);
            console.log(this);
        }, false);
    </script>
</body>
</html>

结果三:

4858美高梅 11

从结果能够见见:

壹第三种艺术事件处理程序中this也针对这么些因素本身;

2第两种办法并不会覆盖第贰种或第二种艺术注册的事件处理程序;

实例四:

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow: hidden;}
</style> </head> <body> <div id=”div1″
onclick=”console.log(‘html:’); console.log(this);”>div1</div>
<script type=”text/javascript”> var div1 =
document.getElementById(‘div1’); div1.onclick = function(){
console.log(‘div1.onclick:’); console.log(this); };
div1.attachEvent(‘onclick’, function(){
console.log(‘div1.attachEvent:’); console.log(this === window); });
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow: hidden;}
    </style>
</head>
<body>
    <div id="div1" onclick="console.log(‘html:’); console.log(this);">div1</div>
    <script type="text/javascript">
        var div1 = document.getElementById(‘div1’);
        div1.onclick = function(){
            console.log(‘div1.onclick:’);
            console.log(this);
        };
        div1.attachEvent(‘onclick’, function(){
            console.log(‘div1.attachEvent:’);
            console.log(this === window);
        });
 
    </script>
</body>
</html>

结果四:

4858美高梅 12

从结果能够看出:

壹第各种格局事件处理程序中this指向全局对象Window;

贰第多样方式也不会覆盖第3种或第1种情势注册的事件处理程序;

三.事件处理程序的调用顺序:多少个事件处理程序调用规则如下:

一透过HTML属性注册的处理程序和透过设置对象属性的处理程序向来优先调用;

二使用addEventListener()注册的处理程序依据它们的注册顺序依次调用;

三施用attach伊夫nt()注册的处理程序只怕依据任何顺序调用,所以代码不应当依靠于调用顺序;

4.风浪裁撤:

一注销事件的浏览器暗中同意操作(比如点击超链接成分会自动发出页面跳转的暗许操作):如若运用前三种艺术注册事件处理程序,能够在处理程序中添加重回值false来撤废事件的浏览器私下认可操作。在帮忙add伊夫ntListener()的浏览器中,也得以经过调用事件目的的preventDefault()方法撤除事件的暗中认可操作。至于IE八及其在此以前的浏览器能够因而设置事件目的的returnValue属性为false来废除事件的私下认可操作。参考代码:

JavaScript

function cancelHandler(event){ var event = event || window.event;
if(event.preventDefault){ event.preventDefault(); }
if(event.returnValue){ event.returnValue = false; } return false; }

1
2
3
4
5
6
7
8
9
10
function cancelHandler(event){
    var event = event || window.event;
    if(event.preventDefault){
        event.preventDefault();
    }
    if(event.returnValue){
        event.returnValue = false;
    }
    return false;
}

贰注销事件传播:在支撑add伊芙ntListener()的浏览器中,能够调用事件目的的四个stopPropagation()方法阻碍事件的接轨传布,它能做事在事变传播时期的其余等级(捕获期阶段、事件目的本人、冒泡阶段);不过在IE八以及其以前版本的浏览器中并不援救stopPropagation()方法,而且这么些浏览器也不匡助事件传播的破获阶段,相应的,IE事件目的有一个cancelBubble属性,设置那一个性子为true能阻止事件尤其传播(即阻止其冒泡)。参考代码(阻止发生在div三区域的点击事件冒泡到div2和div壹):

<!DOCTYPE HTML> <html> <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>test</title> <style type=”text/css”>
#div1{width: 300px; height: 300px; background: red; overflow:hidden;}
#div2{margin:50px auto; width: 200px; height: 200px; background: green;
overflow:hidden;} #div3{margin:50px auto; width: 100px; height: 100px;
background: blue;} </style> </head> <body> <div
id=”div1″>div1 <div id=”div2″>div2 <div id=”div3″>div3
</div> </div> </div> <script
type=”text/javascript”> var div1 = document.getElementById(‘div1’);
var div2 = document.getElementById(‘div2’); var div3 =
document.getElementById(‘div3’);    div1.onclick = function(){
console.log(‘div1’);    };    div2.onclick = function(){
console.log(‘div2’);    };    div3.onclick = function(event){
stopEventPropagation(event); console.log(‘div3’);    }; function
stopEventPropagation(event){ var event = event || window.event;
if(event.stopPropagation){ event.stopPropagation(); }else{
event.cancelBubble = true; } } </script> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    <style type="text/css">
        #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
        #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
        #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
    </style>
</head>
<body>
    <div id="div1">div1
        <div id="div2">div2
            <div id="div3">div3
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var div1 = document.getElementById(‘div1’);
        var div2 = document.getElementById(‘div2’);
        var div3 = document.getElementById(‘div3’);
       div1.onclick = function(){
            console.log(‘div1’);
       };
       div2.onclick = function(){
            console.log(‘div2’);
       };
       div3.onclick = function(event){
            stopEventPropagation(event);
            console.log(‘div3’);
       };
 
        function stopEventPropagation(event){
            var event = event || window.event;
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    </script>
</body>
</html>

理所当然,关于事件冒泡照旧有可利用之处的,那约等于大家常说的事件代理大概事件委托。

2 赞 4 收藏 1
评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有