JavaScript 事件的一些重要说明_javascript技巧

1，JavaScript异步回调

复制代码 代码如下:

2，事件对象
　　下面的js实现当在textarea文本框里面键入回车时，并不导致换行。即禁用回车键

复制代码 代码如下:

3，this关键字
　　浏览器会把this关键字等同于引用该函数(含有this关键字的函数)的当前元素

复制代码 代码如下:

• 
  Home
  


• 
  mappath
  


• 
  parentpath
  

4，取消事件冒泡
　　通常当你对子元素作样式作修改，或者触发事件，根据冒泡原理，其父元素也会作相同改变，为防止这类事情发生，需要做取消事件冒泡的处理。
　　下面实例展示了鼠标会为其悬停的当前元素加上红色的边框。如果不阻止事件冒泡的话，每次把鼠标移到一个元素上时，该元素及其父元素都会有红色的边框，这是我们不希望看到的。

复制代码 代码如下:

• 
  Home
  


• 
  mappath
  


• 
  parentpath
  

5，重载浏览器的默认行为
　　浏览器都有这种默认的行为，即当我们在标签上点击的时候会链接到href属性的地址上，有的时候我们并不希望这种事情发生，而想实现我们自己的效果，比如弹出警告框，示例如下。

复制代码 代码如下:

重载浏览器的默认行为

6，事件的亲和力(accessibility,又称可访问性)
　　为了使得自己的网站更有亲和力，可以这样考虑，当我们把鼠标放在一个元素上或者通过键盘的tab键访问时，其样式应该保持一致，如下代码

复制代码 代码如下:

• 
  Home
  


• 
  mappath
  


• 
  parentpath
  

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);
}
}