您的位置：首页 > Web前端 > JavaScript

JavaScript 事件的一些重要说明

2009-10-25 00:00 190 查看
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>

3，this关键字
　　浏览器会把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 = "http://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); 
//好像直接写下面一句也可以 
//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>的背景颜色变成蓝色 
a[i].onmouseover = a[i].onfocus = function() 
{ 
this.style.backgroundColor = "blue"; 
} 
//绑定鼠标离开和模糊事件处理函数到<a>元素上 
//当用户从链接移开时，它会把<a>的背景颜色变成白色 
a[i].onmouseout = a[i].onblur = function() 
{ 
this.style.backgroundColor = "white"; 
} 
} 
</script>

7，绑定事件监听 
//addEventt()添加事件 
//Scott Andrew's original addEvent() function 
//elm元素,document.getElementId('btn1') 
//evType事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on",如Click 
//fn当然就是绑定的函数了,记住不要跟括号,如showalert 
//useCapture布尔值，表示该事件的响应顺序.userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式.建议用false 
function addEvent(elm, evType, fn, useCapture) 
{ 
if (elm.addEventListener) 
{//firefox,navigation,etc.. 
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); 
} 
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航