target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

  在标准浏览器下我们一般使用event.target就能解决,然而低版本IE浏览器总是会出些幺蛾子,这时候就得使用event.srcElement。

  这时候就得有一个兼容性的写法了。

  1、使用三元运算符  

var Target = event.target ? event.target : event.srcElement

  

  2、使用if语句来判断

if(event.target){ // IE10及以下版本浏览器不能识别
// do something...
}else if(event.srcElement){ // IE10及以下版本会执行该代码
// do something...
}

  

  例如:现在要为一个按钮添加一个监听事件,当点击该按钮时就触发事件,这时候可以这样写:

<button id="btn">按钮</button>
<script>
// tagName返回的标签名默认都是大写的,可使用toLowerCase将其转换为小写
var btn = document.getElementById('btn'); if(btn.attachEvent){ // IE8及以下版本写法
btn.attachEvent('onclick',function(ev){ // Firefox下必须给函数传一个参数,一般会传event或ev,否则会报错,其他浏览器可不传,为了兼容性,所以给函数传参以防出错。
var Target = ev.target ? ev.target : ev.srcElement;
console.log(ev.type); // 事件类型
console.log(Target.tagName) // 触发该事件的标签名,为大写,不同的浏览器可能会返回不同的结果
})
}else if(btn.addEventListener){ // IE8及以下版本不支持
btn.addEventListener('click',function(ev){ // Firefox下必须给函数传一个参数,一般会传event或ev,否则会报错,其他浏览器可不传,为了兼容性,所以给函数传参以防出错。
var Target = ev.target ? ev.target : ev.srcElement;
console.log(ev.type);
console.log(Target.tagName)
})
}
</script>

  

event.target与event.srcElement的更多相关文章

  1. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  2. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  3. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

  4. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

  5. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  6. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  7. JavaScript Event Delegation, and event.target vs. event.currentTarget

    原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...

  8. event.target和event.currentTarget的区别----0605加深理解

    target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...

  9. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

随机推荐

  1. Confluence5.4.4迁移至6.3.1

    1.数据备份 服务器查看: 2.安装破解文件及安装包至服务器 3.停止旧版本并启动安装 4.访问8090端口开始安装 5.获取授权码,需要能访问国外网站,并且有atlassian账号 6.将数据库连接 ...

  2. Webpack 2 视频教程 008 - WDS 端口号等配置相关

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  3. vmware workstation14永久激活密钥分享

    vmware workstation14永久激活密钥分享 VMware Workstation是一款功能强大的桌面虚拟计算机软件,简单来说就是最强的中文虚拟机了,可以在桌面上运行不同的操作系统,下面就 ...

  4. JavaScript 之DOM&BOM

    重点来了 : BOM对象 window对象 : 所有浏览器都支持window对象. 概念上讲 : 一个html文档对应一个window对象. 功能上讲 : 控制浏览器窗口的. 使用上讲 : windo ...

  5. Java笔记:字符串详解

    字符串详解 更新时间:2018-1-6 21:20:39 String 字符串创建 String str1="ABC";//推荐使用 String str2 = new Strin ...

  6. python2中的__init__.py文件的作用

    python2中的__init__.py文件的作用: 1.python的每个模块的包中,都必须有一个__init__.py文件,有了这个文件,我们才能导入这个目录下的module. 2.__init_ ...

  7. TurnipBit—MicroPython开发板:从积木式编程语言开始学做小小创客

    编程.建模.制作动画和游戏--这些当初我们默认只有成年人玩得转的事情,现在早已经被无数小孩子给颠覆甚至玩出新境界了.热爱科技和动手的"创客"(Maker)现在在全世界都炙手可热.今 ...

  8. console报错类型

    常见 console报错 Error 错误 EvalError 全局错误 RangeError 引用(范围)错误 ReferenceError 参数(参考)错误 SyntaxError 语法错误 ty ...

  9. spring boot系列03--spring security (基于数据库)登录和权限控制(下)

    (接上篇) 后台 先说一下AuthConfig.java Spring Security的主要配置文件之一 AuthConfig 1 @Configuration 2 @EnableWebSecuri ...

  10. 如何迭代输出某文件夹下的所有文件的路径?(os.walk用法)

    查看目录结构: tree 查看文件结构: os.walk 查看os.walk用法: help(os.walk) For each directory in the directory tree roo ...