JS的事件处理

Posted tanWFront

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS的事件处理相关的知识,希望对你有一定的参考价值。

事件就是文档或浏览器窗口发生触电一些特定交互瞬间,JS与html之间的交互是通过事件实现的,如click,load,mouseover都是事件的名称。

事件处理的方式有:HTML事件处理、DMO0级事件处理、DOM2级事件处理、IE事件处理程序。

一、html事件处理程序(最为传统)

在html标签中写入事件处理函数。eg:<input type="button" value="click me" οnclick="alert("hello")" />

缺点:1、当用户在html元素一出现在页面上就去触发相应的事件时,事件的处理程序可能还不具备执行条件(比如说调用的函数还木有被解析),就会引发错误。eg:<input type="button" value="click me" οnclick="message()" /><script type="text/javascript">function message()alert("hello world");</script>因为调用的函数处于按钮的下方,如果在message函数被加载之前就点击了按钮就会引发错误。

2、如果要修改事件处理函数名称,就要改动两个地方:html代码和javascript代码。

二、DMO0级事件处理程序

eg:var btn=document.getElementById("myBtn");btn.οnclick=function()alert("hello");

缺点:对于共用一个相同id的两个相同的事件来说,事件1会被事件2所覆盖。eg:var btn=document.getElementById("myBtn");btn.οnclick=function()alert("hello1");btn.οnclick=function()alert("hello2");只会显示hello2

可删除指定的事件处理程序,只要将事件处理程序的属性设置为null就Ok了。eg:btn.οnclick=null;将处理程序设置为null以后,再点击按钮不会发生任何动作。

三、DOM2级事件处理程序

DOM2级事件定义了两个方法,用于指定和删除事件处理程序。这两个操作分别为:addEventListener()和removeEventListner().所有的DOM节点都包含这两个方法。他们要接受3个参数,分别为:要处理的事件名,处理函数,布尔值。最后的布尔值参数如果为ture,表示在捕获阶段处理程序,如果为false,表示在冒泡阶段调用事件处理程序。

例如在按钮上为click添加事件处理程序,可以用下面的代码:

var btn=document.getElementById("myBtn");

btn.addEventListner("onclick",function()alert("hello world");false);

使用DOM2事件处理程序的优点是:可以为同一个元素添加多个事件处理程序。

例:var btn=getElementById("myBtn");

btn.addEventListner("click",function()alert(this.id);,flase);

btn.addEventListner("click",function()alert("hello world");,flase);

结果:先显示id,后显示hello world。

通过addEventListner()添加的事件处理程序只能通过removeEventListner来删除。移除时使用的参数与添加事件处理程序的参数相同。另:通过addEventListner添加的匿名函数无法删除。

四、IE事件处理程序。

IE添加和删除事件处理程序的函数分别为:attachEvent()和detachEvent();这两个函数接收相同的两个参数:事件处理程序名与事件处理函数。由于IE只支持事件冒泡,所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。

例如:var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function()alert("hello world"););

IE在使用attachEvent方法的情况下,事件处理程序的作用域为全局作用域,因此this等于window。(在编写跨浏览器的代码时,记住这一点非常重要)。

与addEventListner类似,attachEvent()方法也可以用来为一个元素添加多个事件处理程序;

eg:

var btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function()alert("clicked"););

btn.attachEvent("onclick",function()alert("hello world"););

值得注意的是:这些事件的处理程序是按逆序触发的,也就是说,先弹出hello world 再弹出clicked。

五、跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件,主要可以使用两个方法:

1、使用能隔离浏览器差异的js库。

2、自己编写:

var btn1=document.getElementById(btn1);

if(btn1.addEventListener)

btn1.addEventListener('click',demo);

else if(btn1.attachEvent)

btn1.attachEvent('click',demo);

else

btn1.οnclick=demo;

demo=function()

alert('Hello');

以上是关于JS的事件处理的主要内容,如果未能解决你的问题,请参考以下文章

怎样理解js中的事件监听

js事件流

JS事件——禁止事件冒泡和禁止默认事件

JS的事件处理

JS的事件处理

js的事件传播