关于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>
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.csu.edu.cn">重载浏览器的默认行为</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); } }