-
一:Event Handlder
一个Event Handlder就是嵌入DOM节点的JavaScript方法,当此节点发生事件时,那么它就会自动的被触发。如下图可以说明此概念。
![](https://images.cnblogs.com/cnblogs_com/sunfishlu/159777/r_WMBT56FCYS~O6ETD4Q~U6~5.jpg)
例如:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<p>The first captain of the USS Enterprise NCC-1701 was <a id="wikipedia"
href="http://en.wikipedia.org/wiki/Christopher_Pike">Christopher
Pike</a>.</p>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var wikipediaLink =
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
init: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var link = document.getElementById("wikipedia");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (typeof link.addEventListener != "undefined")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
link.addEventListener("click", wikipediaLink.clickListener, false);
}
else if (typeof link.attachEvent != "undefined")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
link.attachEvent("onclick", wikipediaLink.clickListener);
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
clickListener: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
alert("Don't believe everything you read on Wikipedia!");
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Core.start(wikipediaLink);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
A:Default Actions
浏览器响应事件通常的做法。大多数情况下,我们希望如此,但是也有一些时候,答案是否定的。
阻止Default Actions发生的最简单的方法就是为此event创建一个event handler,然后return false。例如:我们修改上面创建的clickListeners。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
clickHandler: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if (!confirm("Are you sure you want to leave this site?"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return false;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
B:this关键字
当我们写一个event handler来关联到许多HTML中的元素时,那么this是一个不错的选择。它表现的有点像变量,但是我们不能给它赋值,它的值就是方法所执行的对象。例如:要打开所点击的URL。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var externalLinks =
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
init: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var extLinks = Core.getElementsByClass("external");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
for (var i = 0; i < extLinks.length; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
extLinks[i].onclick = externalLinks.clickHandler;
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
clickHandler: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
open(this.href);
return false;
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Core.start(externalLinks);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
C:Event handler的缺陷。
对一个html的元素,只能分配给它一个event handler,否则前面的event handler会不起作用,也就是被后面的所取代。
二:Event Listeners
Event Listeners和Event handler比较相似,它也是嵌到dom节点里的JavaScript方法,但是我们可以分配许多的Event Listeners给一个HTML元素。如图所示。
![](https://images.cnblogs.com/cnblogs_com/sunfishlu/159777/r_lis.jpg)
创建一个Event Listeners的代码:element.addEventListener("event", eventListener, false);第三个参数为true时,表示事件传播的时候出发该事件,false时则不考虑事件传播。在IE浏览器下,创建的代码:element.attachEvent("onevent", eventListener);清除event handler的代码分别是:element.removeEventListener("event", eventListener, false);element.detachEvent("onevent", eventListener);
在使用的时候,我们需要进行判断来保证对不同的浏览器使用正确的方法。例如:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<p>The first captain of the USS Enterprise NCC-1701 was <a id="wikipedia"
href="http://en.wikipedia.org/wiki/Christopher_Pike">Christopher
Pike</a>.</p>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var wikipediaLink =
{
init: function()
{
var link = document.getElementById("wikipedia");
if (typeof link.addEventListener != "undefined")
{
link.addEventListener("click", wikipediaLink.clickListener, false);
}
else if (typeof link.attachEvent != "undefined")
{
link.attachEvent("onclick", wikipediaLink.clickListener);
}
},
clickListener: function()
{
alert("Don't believe everything you read on Wikipedia!");
}
};
Core.start(wikipediaLink);
A:Default Actions
为了阻止Default Actions,我们使用preventDefault方法,在IE浏览器中,我们使用returnValue。例如:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var wikipediaLink =
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
init: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var link = document.getElementById("wikipedia");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (link.addEventListener)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
link.addEventListener("click", wikipediaLink.clickListener, false);
}
else if (link.attachEvent)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
link.attachEvent("onclick", wikipediaLink.clickListener);
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
clickListener: function(event)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (typeof event == "undefined")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
event = window.event;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (!confirm("Are you sure you want to leave this site?"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (typeof event.preventDefault != "undefined")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
event.preventDefault();
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
event.returnValue = false;
}
}
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Core.start(wikipediaLink);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
注:在IE中,event作为window对象的一个属性,可以直接使用,而在firefox中,需要通过传参的方式来传播事件。
B:事件传播
事件传播分为3个阶段:
1:捕获阶段。事件会沿着dom树,访问每一个节点,直到到达目标元素。但是在IE浏览器中没有此阶段,其实大多数开发者都避免使用capturing event listeners。
2:结果程序执行阶段。浏览器要找分配到目标节点上的Event Listeners,然后执行它。
3:事件冒泡阶段
![](https://www.cnblogs.com/images/cnblogs_com/sunfishlu/159777/o_sun.jpg)