专栏首页拂晓风起JS获取事件对象,获取事件的源对象(Firefox,IE)

JS获取事件对象,获取事件的源对象(Firefox,IE)

做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同的做法。

例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。

也可以用Prototype或者JQuery等,它们有他们对事件的包装。还是使用JS库比较好,不然就有下边的麻烦。

Firefox要传递参数

<head>
<script>    
    function click1(event,str1){
        alert(event+str1);

    }
</script>
</head>
<body>
<input type="button" id="abc" onclick="click1(event,'kenko');" value="click me"/>
</body>

IE不需要传递参数

<head>
<script>    
    function click1(){
        alert(event.srcElement.value);
    }
</script>
</head>
<body>
<input type="button" id="abc" onclick="click1();" value="click me"/>
</body>

event.srcElement

event.srcElement.id

================================================================================

在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.。     解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.。同时注意event的 兼容性问题。  感觉这个挺好,可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。 <script type="text/javascript">    function tdclick(){        if(event.srcElement.tagName.toLowerCase()=='td')             alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1));     }</script> event.srcElement从字面上可以看出来有以下关键字:事件,源     他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById("")这样的功能, 经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明: IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie中,事件对象是全局的,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过! function myfunc(){var evt=getEvent();var element=evt.srcElement || evt.target;} function getEvent(){if(document.all){return window.event;//如果是ie}func=getEvent.caller;while(func!=null){var arg0=func.arguments[0];if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){return arg0;}}func=func.caller;}return null;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 事件响应的优先级、stopProgapation禁止下层组件响应

    用户1258909
  • Loader拉取图片,由于redirect重定向,导致策略文件无效 设置checkPolicyFile后还是无效:需要一个策略文件,但在加载此媒体时未设置 checkPolicyFile 标志

    用户1258909
  • 用SonBuddy搭建无线局域网,共享上网。(SONBuddy常见问题,无线组网,共享,上网,笔记本)

    用户1258909
  • Event(事件)的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

    sam dragon
  • Libevent源码分析系列

    源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了,然后去看底层相应的源码,这样比较有条理,自上向下掌握。下面用libevent库写个程...

    用户3033338
  • Libevent源码分析系列【转】

    转自:https://www.cnblogs.com/zxiner/p/6919021.html

    用户3033338
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框...

    IMWeb前端团队
  • React基础语法06-事件对象的应用

    老规矩,先看完官方文档,记录学习笔记: 教程:https://www.runoob.com/react/react-tutorial.html 文档:htt...

    祈澈菇凉
  • MySQL-event机制详解及官方bug剖析

    提示:公众号展示代码会自动折行,建议横屏阅读 ---- ---- 近期,有线上5.6版本event用户反映了两个问题: (1) 部分event莫名其妙的延迟...

    腾讯数据库技术
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watc...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券