js中获取事件对象方法概述

复制的代码如下： varevt=window . event | | arguments[0]；讨论了以下三种添加事件的方法，您可能会看到获取以前从未见过的事件的方法。1、第一种添加事件的方式，直接在html的属性中写JS代码，复制代码如下： div onclick=' alert(4)；'1 Div1元素/div这大概是上世纪90年代写的。当时，直接在网页上写js代码是非常普遍的。也许js在当时并不是很重要，只是用来验证或者一些花哨的效果。如何通过这种添加事件的方式获取事件对象？IE很简单，因为event是全局对象，所以可以直接使用event。复制代码如下： div onclick=' alert(window . event . type)；'1 Div1元素/Div点击此Div后，IE中会弹出‘点击’字符的信息框。意味着获得了事件对象。如果在Opera/Safari/Chrome中测试，会发现效果和IE一样，说明Opera/Safari/Chrome也支持IE获取事件对象。火狐会出现一个错误，表示：window.event未定义，表示火狐不支持IE获取事件对象，而是作为句柄的第一个参数传入，文章开头就提到了。上面使用window.event获取事件对象，但实际上window是可以省略的，就像用alert代替window.alert一样，比如复制代码如下： div onclick=' alert (event。类型；' '1 Div1 Element/div在IE/Opera/Safari/Chrome中测试过，和刚才那个没什么区别。在Firefox中再试一次，会有惊喜，你会发现弹出的是‘点击’消息框而不是‘未定义’。这两个测试的区别只是一个使用window.event.type，另一个使用event.type，这个问题在下面详细讨论。下面使用句柄的第一个参数来获取事件对象。你可以把onclick属性值想象成一个匿名函数，onclick属性值的字符串实际上就是这个匿名函数中的js代码。在这种情况下，我们可以通过函数的一个属性参数来获取匿名函数的第一个参数，这个参数就是事件对象。例如，复制代码如下： div onclick=' alert(参数[0]。类型；' '1 Div 1 Element/Div IE中将报告一个错误，提示arguments.0.type为空或不是对象。在Firefox/Opera/Safari/Chrome中会弹出一个‘click’内容的信息框，表示它们都支持将事件对象作为句柄的第一个参数。也说明Opera/Safari/Chrome不仅支持W3C标准方式获取事件对象，而且兼容IE方式获取事件对象。既然我们知道onclick对应一个匿名函数，我们不妨打印出这个匿名函数，只需复制下面的代码： div onclick=' alert(arguments。被呼叫者)；”1 Div1 Element/Div在每个浏览器中点击Div，结果如下：ie6/7/8 : function onclick(){ alert(arguments . caller)；} IE9 : function onclick(event){ alert(arguments . caller)；} Firefox/Safari : function onclick(event){ alert(arguments . caller)；}Chrome :函数onclick(evt){ alert(arguments . caller)；}Opera :函数匿名(事件){ alert(arguments . caller)；}观察这些函数，发现IE6/7/8没有定义参数IE9/Firefox/Safari/Opera定义参数eventChrome定义参数evt。回到上面留下的问题，复制代码如下： div onclick=' alert(window . event . type)；'Div1元素/div div onclick=' alert(event . type)；'1 Div1元素/Div这两个div之间唯一的区别是window.event.type和event.type.分别点击后，后者并没有在火狐中弹出‘未定义’而是‘点击’，因为火狐中的匿名函数定义了参数事件，正好和IE的全局对象事件同名，从而误以为火狐也支持IE获取事件对象。

同样的道理，如果Chrome中定义的参数是evt，也可以通过以下方式获取Chrome中的事件对象，如下所示：复制代码如下： div onclick=' alert(evt)；'1 Div1 Element/div 2，第二种添加事件的方式，定义了一个函数。分配给html元素的onXXX属性的复制代码如下： Script Type=' text/JavaScript ' function clk(){ }/Script div onclick=' clk()' div 2 element/div先定义函数clk再分配给onclick属性，应该也是90年代比较流行的一种编写方法。比第一种方法更好的是，它将业务逻辑代码封装在一个函数中，使得HTML代码与JS代码略有分离，不像第一种方法那样紧密耦合。如何以这种方式获取事件对象(在clk函数中)？在IE中使用全局对象事件还是没有问题的，比如：复制代码的代码如下： script type=' text/JavaScript ' function clk(){ alert(window . event)；}/脚本Div onclick=' clk ()' div 2元素/div点击Div后，IE/Opera/Safari/Chrome可以正常获取除Firefox以外的事件对象。上面已经提到Opera/Safari/Chrome兼容IE模式(window.event)来获取事件对象，但是火狐本身并不支持。所以火狐只能通过参数传入。尝试按如下方式编写复制的代码： script type=' text/JavaScript ' function clk(){ alert(event)；}/script div onclick=' clk()' div 2 element/div因为在Firefox中，匿名函数有事件参数，而clk()在匿名函数内部，可以通过打印出匿名函数知道复制的代码如下： script type=' text/JavaScript ' function clk(){ alert(arguments . caller . caller)；}/script Div onclick=' clk()' Div 2 element/Div点击该Div，Firefox弹出一个信息框，内容如下：复制代码如下： function onclick(event){ clk()；}返回clk中的alert(事件)。由于匿名函数的事件被传入，clk可以在这个闭包中获取事件。事实上，Firefox在点击后会报告一个错误：事件未定义。猜测匿名函数和函数clk(){alert(event)的闭包；}不是同一个封闭环境。如果这个方法不起作用，它只能通过显示的参数传入。例如，复制代码如下：脚本类型=' text/JavaScript '函数clk(e){ alert(e)；}/script Div onclick=' clk(arguments[0])' Div 2元素/div点击Div，在Firefox中事件对象会正确弹出，支持参数传入的浏览器可以使用，比如Opera/Safari/Chrome。将上述代码中的参数[0]更改为事件，所有浏览器都将支持它。将上述代码中的参数[0]更改为window.event，这只会受到Firefox的支持。将上述代码中的参数[0]更改为evt，它将仅受Chrome支持。想想为什么？3.添加事件的第三种方式是使用element.onXXX复制代码如下： div ID=' D3' div 3 Element/div脚本类型=' text/JavaScript ' var D3=document . getelementbyid(' D3 ')；D3.onclick=function(){} /script也是比较早的，但它的优点是JS可以完全脱离HTML，但前提是要为HTML元素提供一个额外的id属性(或者其他方式获取元素的对象)。以这种方式添加事件只支持window.event，不支持参数传入。Firefox只支持参数传入，不支持其他方式。IE9/Opera/Safari/Chrome都支持。4.添加事件的第四种方法是使用addEventListener或IE专有的attachEvent复制代码如下： div ID=' D4 ' div 4 element/div Script Type=' text/JavaScript ' var D4=document . getelementbyid(' D4 ')；函数clk(){ alert(4)} if(D4 . addeventlistener){ D4 . addeventlistener(' click '，clk，false)；} if(D4 . attachevent){ D4 . attachevent(' onclick '，clk)；} /script这是目前推荐的方法，比前两种方法更强大。它可以向元素添加多个句柄(或响应函数)，并支持事件冒泡或捕获。默认情况下，前三种方法是冒泡的。当然，IE6/7/8仍然没有遵循标准，使用自己专有的attachEvent，不支持事件捕获。IE9中已经支持AddEventListener。

首先用window.event进行测试，例如，复制代码如下： script type=' text/JavaScript ' vard 4=document . getelementbyid(' D4 ')；函数clk(){ alert(window . event)} if(D4 . addevent listener){ D4 . addevent listener(' click '，clk，false)；} if(D4 . attachevent){ D4 . attachevent(' onclick '，clk)；}/脚本点击Div[id=d4]，IE/Opera/Safari/Chrome正确弹出事件对象信息框，火狐弹出‘未定义’，这是意料之中的，因为火狐不支持window.event作为事件对象。用句柄的第一个参数进行测试，例如，复制代码如下： script type=' text/JavaScript ' vard 4=document . getelementbyid(' D4 ')；函数clk(e){ alert(e)} if(D4 . addeventlistener){ D4 . addeventlistener(' click '，clk，false)；} if(D4 . attachevent){ D4 . attachevent(' onclick '，clk)；}/脚本测试前，先猜结果。可能有人认为IE中应该弹出undefined，其他浏览器都是事件对象。事实上，浏览器弹出的所有信息框都显示事件对象。总结：1。IE6/7/8支持通过window.event获取对象，通过附加事件添加事件时，也支持传入事件对象作为句柄的第一个参数。2.Firefox只支持传入事件对象作为句柄的第一个参数。3.IE9/Opera/Safari/Chrome支持这两种方法。

每个浏览器的相关：事件对象差异列表。