javascript事件学习小结(二)js事件处理程序_javascript技巧

《javascript事件学习小结(二)js事件处理程序_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JavaScript事件学习小结（二）js事件处理程序相关阅读：JavaScript事件学习小结（五）js中事件类型Z鼠标事件http://www.jb51.net/article/86259.htmJavaScript事件学习小结（一）事件流http://www.jb51.net/article/86261.htmjavaScript事件学习小结（四）event的公共成员（属性和方法）http://www.jb51・net/article/86262・htmJavaScript事件学习小结（二）js事件处理程序http://www.jb51.net/article

2、/86264.htmJavaScript事件学习小结（三）js事件对象一、事件处理程序前面提到，事件是用户或浏览器口身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以〃on〃开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。为事件指定事件处理程序的方法主要有3种。1、html事件处理程序首先，这种方法已经过时了。因为动作（javascript代码）和内容（html代码）紧密耦合。但是写个小demo的时候还

3、是可以使用的。这种方式也有两种方法，都很简单：第一种：直接在html中定义事件处理程序及包含的动作。复制代码代码如下：第二种：html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。复制代码代码如下：note:1)通过event变量可以直接访问事件本身,比如onclick=，，alert(event,t

4、ype)，z会弹出click事件。2)this值等于事件的目标元素，这里目标元素是inputo比如onclick=，，alert(this,value)z，可以得到input元素的value值。2、DOMO级事件处理程序这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数。因为这种方法为元索添加多个事件处理函数，则后面的会覆盖前面的。添加事件处理程序：删除事件处理程序：复制代码代码如下：myBtn.onclick二null;3、D0M2级事件处理程序D0M2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListoner()和removeEventListener()。这两个方法都需要3个参数：事件名，事件处理函数，布尔值。这个布尔值为true,在捕获阶段处理事件，为false,在冒泡阶段处理事件，默认为false。添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”，一个弹Ill“world”。〈in

6、putid二〃myBttype二"buttovalue二"clickme!7>删除事件处理程序：通过addEvcntListcncr添加的事件处理程序必须通过rcmovcEvcntListo

7、ner删除，且参数一致。note:通过addEventListener添加的匿名函数将无法删除。'卜•而这段代码将不起作用！复制代码代码如下：myBtn.removeEventListener(HclickM,function(){alert(HworldH);},false);看似该rcmovcEvcntListoner与上面的addEvcntListcncr参数一致，实则第二个参数中匿名函数是完全不同的。所以为了能删除事件处理程序，代码可以这样写：〈inputid=，/myBtnz，type二〃bulton〃value二〃clickme!〃/>