JavaScript 事件处理核心机制与兼容性实现

JavaScript异步回调与事件对象处理

1、JavaScript异步回调机制

 
<script language="javascript">
//将回调函数loaded注册至window.onload处理程序
window.onload = loaded;
//将window.alert方法引用传递给show变量
var show = window.alert;
function loaded(){
show("success");
} 
</script>

2、事件对象处理

以下JS代码实现在textarea中输入回车键时不产生换行效果，即禁用回车键。

 
<textarea ></textarea>
<script language = "javascript">
/* 
事件对象的关键难点在于IE实现与W3C规范存在差异。IE使用独立的全局事件对象（可通过window.event访问），而其他浏览器则通过参数传递事件对象。
*/ 
document.getElementsByTagName("textarea")[0].onkeypress = function(e)
{ 
//若事件对象未定义，则获取全局对象（仅适用于IE）
var e = e || window.event;
//若检测到回车键，返回false以阻止默认行为
return e.keyCode != 13;
} 
</script>

this关键字指向与事件冒泡控制

3、this关键字的上下文绑定

浏览器会将this关键字绑定为调用包含该关键字函数的当前元素。

 
<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language = "javascript">
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++)
{ 
li[i].onclick = handeClick;
} 
function handeClick()
{ 
this.style.backgroundColor = "blue";
this.style.color = "red";
} 
</script>

4、取消事件冒泡

通常修改子元素样式或触发事件时，依据冒泡原理父元素也会执行相同操作。为防止此类情况，需执行取消事件冒泡处理。

下述实例展示鼠标悬停时当前元素添加红色边框。若不阻止冒泡，鼠标移至元素上时，其父元素也会显示红色边框，这并非期望结果。

 
<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language="javascript">
//通用冒泡阻止函数
function stopBubble(e)
{ 
if (e && e.stopPropagation)
//W3C标准方法
e.stopPropagation();
else
//IE兼容方法
window.event.cancelBubble = true;
} 
var li = document.getElementsByTagName("*");
for (var i = 0; i < li.length; i++)
{ 
//监听鼠标移动，元素悬停时添加红色边框
li[i].onmouseover = function(e)
{ 
this.style.border = "1px solid red";
stopBubble(e);
} 
//监听鼠标离开，移除之前添加的边框
li[i].onmouseout = function(e)
{ 
this.style.border = "0px";
stopBubble(e);
} 
} 
</script>

浏览器默认行为取消与事件亲和力优化

5、重载浏览器默认行为

浏览器具有点击<a>标签时跳转至href属性地址的默认行为。有时需阻止此行为并实现自定义效果，例如弹出警告框，示例如下。

 
<a href = "https://www.jb51.net">重载浏览器的默认行为</a>
<script language = "javascript">
/* 
旨在实现与<a href = "#" onclick = function(){alert("success");}>content</a>相同的效果
*/ 
function stopDefault(e)
{ 
//W3C标准防止浏览器默认行为
if (e && e.preventDefault)
e.preventDefault();
//IE兼容防止浏览器默认行为
else
window.event.returnValue = false;
return false;
} 
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++)
{ 
a[i].onclick = function(e)
{ 
alert("我已经修改了浏览器的默认行为了");
return stopDefault(e);
//直接返回false亦可达到相同目的
//return false;
} 
} 
</script>

6、事件亲和力（Accessibility，即可访问性）

为提升网站亲和力，当鼠标悬停或通过键盘Tab键访问元素时，应保持样式一致，代码如下。

 
<body>
<div id = "body">
<ul class = "links">
<li>
<a href = "/">Home</a>
</li>
<li>
<a href = "./">mappath</a>
</li>
<li>
<a href = "../">parentpath</a>
</li>
</ul>
</div>
</body>
<script language="javascript">
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++)
{ 
//将鼠标悬停和聚焦事件处理函数绑定至<a>元素
//当用户鼠标悬停或键盘聚焦链接时，背景色变为蓝色
a[i].onmouseover = a[i].onfocus = function()
{ 
this.style.backgroundColor = "blue";
} 
//将鼠标离开和模糊事件处理函数绑定至<a>元素
//当用户离开链接时，背景色恢复为白色
a[i].onmouseout = a[i].onblur = function()
{ 
this.style.backgroundColor = "white";
} 
} 
</script>

通用事件监听与注销函数封装

7、绑定事件监听器

 
//addEvent()用于添加事件监听
//Scott Andrew原始addEvent()函数
//elm元素参数，如document.getElementById('btn1')
//evType事件名称，注意"onclick"应改为"click"，"onblur"应改为"blur"，即事件名不带"on"前缀
//fn绑定的函数，注意不要加括号，如showalert
//useCapture布尔值，表示事件响应顺序。若为true采用捕获模式，若为false采用冒泡模式。建议使用false
function addEvent(elm, evType, fn, useCapture)
{ 
if (elm.addEventListener)
{//Firefox, Navigation等浏览器
elm.addEventListener(evType, fn, useCapture);
} 
else if (elm.attachEvent)
{//IE浏览器
var r = elm.attachEvent('on' + evType,fn);
} 
else
{ 
elm['on' + evType] = fn;
} 
} 
//removeEvent()用于注销事件监听
//参数名与addEvent()函数一致
function removeEvent(elm, evTye, useCapture)
{ 
if (elm.detachEvent)
{ 
elm.detachEvent('on' + evType);
} 
else if (elm.removeEventListener)
{ 
elm.removeEventListener(evType, userCapture);
} 
}