JavaScript事件学习总结(二)js事件处理程序

相关阅读：

JavaScript事件学习总结(5)js中事件类型的鼠标事件。

//www . JB 51 . net/article/86259 . htm

JavaScript事件学习总结(一)事件流。

//www . JB 51 . net/article/86261 . htm

javaScript事件学习总结(4)事件的公共成员(属性和方法)。

//www . JB 51 . net/article/86262 . htm

JavaScript事件学习总结(2) js事件处理程序。

//www . JB 51 . net/article/86264 . htm

JavaScript事件学习总结(3) js事件对象。

一、事件处理程序。

如前所述，事件是由用户或浏览器本身执行的操作，如单击、加载和鼠标悬停。响应事件的函数称为事件处理程序(也称为事件处理程序和事件处理程序)。事件处理程序的名称以“on”开头，因此click事件的事件处理程序是onclick，load事件的加载事件处理程序是onload。

为事件指定事件处理程序有三种主要方式。

1.html事件处理程序。

首先，这个方法已经过时了。因为动作(javascript代码)和内容(html代码)是紧密耦合的。但是它仍然可以在编写小演示时使用。

这种方式也有两种方法，都很简单：

第一种：直接在html中定义事件处理程序及其动作。

复制的代码如下：输入类型='按钮'值='点击我！'/

第二，事件处理程序在html中定义，执行的动作调用在其他地方定义的脚本。

复制的代码如下：输入类型='按钮'值='点击我！'/script function show message(){ alert(' clicked！');}/脚本

注释：

1)事件本身可以通过事件变量直接访问。例如，onclick='alert(event.type)'将弹出click事件。

2)值2)这等于事件的目标元素，其中目标元素是输入的。例如，onclick='alert(this.value)'可以获取输入元素的值。

2.DOM0级事件处理程序。

这个方法很简单，可以跨浏览器使用，但是一个元素只能添加一个事件处理程序。

因为此方法向元素添加了多个事件处理程序，所以后者将重写前者。

添加事件处理程序：

输入类型='按钮'值='点击我！'onclick=' show message()'/script function show message(){ alert(' clicked！');}/脚本删除事件处理程序：

复制代码如下： myBtn.onclick=null

3.DOM2级事件处理程序。

DOM2第2级事件处理程序可以为一个元素添加多个事件处理程序。它定义了两种添加和删除事件处理程序的方法：addEventListener()和removeEventListener()。

这两种方法都需要3个参数：事件名称、事件处理程序和布尔值。

该布尔值为真，在捕获阶段处理事件时为假，在冒泡阶段处理事件时为假。

添加事件处理程序：现在为按钮添加两个事件处理程序，一个弹出“hello”，另一个弹出“world”。

输入id='myBtn '类型='button '值='单击我！'/script var myBtn=document . getelementbyid(' myBtn ')；myBtn.addEventListener('click '，function(){ alert(' hello ')；}，false)；myBtn.addEventListener('click '，function(){ alert(' world ')；}，false)；/script delete事件处理程序：必须使用一致的参数通过removeEventListener删除通过addEventListener添加的事件处理程序。

注意：无法删除通过addEventListener添加的匿名函数。以下代码不起作用！

复制代码如下： mytn . removeeventlistener(' click '、function(){ alert(' world ')；}，false)；

removeEventListener似乎与上面的addEventListener参数一致，但实际上，第二个参数中的匿名函数完全不同。

因此，为了删除事件处理程序，代码可以编写如下：

输入id='myBtn '类型='button '值='单击我！'/script var myBtn=document . getelementbyid(' myBtn ')；var handler=function(){ alert(' hello ')；} myBtn.addEventListener('click '，handler，false)；mybtn . removeeventlistener(' click '，处理程序，false)；/脚本二。IE事件处理程序。

1.实际应用场景。

IE8及以下版本的浏览器不支持AddEventListener。在实际开发中，如果你想与IE8及以下版本的浏览器兼容。如果使用本机绑定事件，则需要进行兼容处理，可以使用jquery的bind来代替。

2.IE8事件绑定。

在E8及以下版本的浏览器中实现了两种类似于DOM中的方法：attachEvent()和disconnectevent()。

这两种方法都需要两个参数：事件处理程序名称和事件处理程序函数。

注释：

IE11只支持addEventListener！

IE9和IE10都支持attachEvent和addEventListener！

TE8及以下版本仅支持attachEvent！

可以拿下面的代码在各种版本的IE浏览器中进行测试。

输入id='myBtn '类型='button '值='单击我！'/script var myBtn=document . getelementbyid(' myBtn ')；var handlerIE=function(){ alert(' helloIE ')；} var handlerDOM=function(){ alert(' hello DOM ')；} myBtn.addEventListener('click '，handlerDOM，false)；myBtn.attachEvent('onclick '，handlerIE)；/script添加事件处理程序：现在为按钮添加两个事件处理程序，一个弹出“hello”，另一个弹出“world”。

脚本var myBtn=document . getelementbyid(' myBtn ')；myBtn.attachEvent('onclick '，function(){ alert(' hello ')；});myBtn.attachEvent('onclick '，function(){ alert(' world ')；});/scriptnote:这里的运行效果值得注意：

首先弹出“world”，然后在E8以下的浏览器中弹出“hello”。DOM中事件的触发顺序是相反的。

IE9及以上的浏览器先弹出“你好”，再弹出“世界”。且DOM中事件触发顺序是相同的。

可见IE浏览器慢慢走上了正轨。

attachEvent通过删除事件处理程序：添加的事件处理程序必须通过disconnectevent方法删除，参数一致。

与DOM事件一样，不能删除添加的匿名函数。

因此，为了删除事件处理程序，代码可以编写如下：

输入id='myBtn '类型='button '值='单击我！'/script var myBtn=document . getelementbyid(' myBtn ')；var handler=function(){ alert(' hello ')；} myBtn.attachEvent('onclick '，处理程序)；myBtn . disconnectEvent(' onclick '，处理程序)；/script note :事件处理程序还有一件事需要注意：作用域。

使用attachEvent()方法，事件处理程序在全局范围内运行，因此这等于window。

dom2或dom0级别的方法范围在元素内部，该值是目标元素。

下面的例子弹出真。

输入id='myBtn '类型='button '值='单击我！'/script var myBtn=document . getelementbyid(' myBtn ')；myBtn.attachEvent('onclick '，function(){ alert(this===window)；});/script编写跨浏览器代码时请记住这一点。

IE7\8检查：

//判断IE7\8兼容性测试var isIE=！窗户。ActiveXObjectvar isIE6=isIE！窗户。XMLHttpRequestvar isIE8=isIE！document.documentModevar isIE7=isIE！isIE6！isIE8if(isie 8 | | isie 7){ Li . attachevent(' onclick '，function(){ _ marker . openinfowindow(_ iw)；})} else { Li . addeventlistener(' click '，function(){ _ marker . openinfowindow(_ iw)；})}以上是边肖介绍的JavaScript事件学习的总结(2)js事件处理程序的相关知识，希望对大家有所帮助！