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 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React 使用Context传递参数

在使用React时,很容易在自定义的React组件之间跟踪数据流。当监控一个组件时,可以监控到那些props被传递进入组件了,这非常有利于了解数据流在什么地方出...

784
来自专栏Python研发

DOM

文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的...

693
来自专栏应用案例

一行代码搞定SwipeRefreshLayout拦截事件

SwipeRefreshLayout这个控件大家可能几百年前就已经在熟练使用了,相关的博客也多不胜数,方法也许不同,但实质都是一样的,写这个的目的也只是为了先把...

2059
来自专栏前端知识分享

Vue入门---事件与方法详解

  v-on:click/mouseover......   简写的:    @click=""   推荐

1134
来自专栏游戏杂谈

关于seajs

虽然已经有很长时间没写JavaScript,但很多时候看到一些应用还是会带着好奇心去研究一下。之前是看腾讯的朋友网,它的webchat做的很不错(虽然ff下有b...

823
来自专栏何俊林

Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑

前言:关于《TV Metro界面(仿泰捷视频TV版)源码解析》由于都是相关代码,就不发公众号了,有兴趣的可以看链接:http://blog.csdn.net/h...

23310
来自专栏互联网杂技

React创建组件的三种方式及其区别

虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下。

1093
来自专栏从零开始学自动化测试

appium+python自动化31-android_uiautomator定位

前言 appium的前身就是封装android的uiautomator这个框架来的,所以uiautomator的一些定位方法也可以用 一、 text 1.通过...

2965
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

612
来自专栏何雪斌的专栏

Web前端事件

事件是与浏览器或文档交互的瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互的桥梁。DOM是树形结构,若同时给父子结点绑定了相同的事件,那么他们的执行顺序...

7540

扫码关注云+社区