event.target与event.srcElement
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的更多相关文章
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- event.target 和 event.currentTarget 的区别
event.target This property of event objects is the object the event was dispatched on. It is differe ...
- 捕获当前事件作用的对象event.target和event.srcElement
语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- event.target和event.currentTarget区别
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- Event.target和Event.currentTarget的区别
<style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...
- JavaScript Event Delegation, and event.target vs. event.currentTarget
原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...
- event.target和event.currentTarget的区别----0605加深理解
target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...
- event.srcElement与event.target的区别
window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...
随机推荐
- MVCC的一些理解
link 一.MVCC简介 MVCC (Multiversion Concurrency Control),即多版本并发控制技术,它使得大部分支持行锁的事务引擎,不再单纯的使用行锁来进行数据库的并发控 ...
- go generate 生成代码
今后一段时间要研究下go generate,在官网博客上看了Rob Pike写的generating code,花了一些时间翻译了下.有几个句子翻译的是否正确有待考量,欢迎指正. 生成代码 通用计算的 ...
- C语言中static关键字的用法
C记得还是大一时学的,现在觉得好久没用了,又捧起来看看.今天刚看到有关static关键字,仔细地看了一遍<C和指针>这本书中的解释,现在觉得清楚多了. 首先,我们将static关键字,修饰 ...
- JavaScript 计算指定月份有多少天
用 js 画工作日历的时候,需要用 js 计算指定月份一共有多少天 在网上找了些方法,都比较繁琐,后来灵机一动,想到一个偷懒的办法,分享一下 一.原理分析 要想得到某月有多少天,只需要获取到当月最后一 ...
- Robot Framework学习笔记(六)------RIDE界面说明
RIDE是一款专门用来编辑Robot Framework用例的软件,用Python编写并且开源. 1.测试项目.测试套件Edit 标签 测试项目和测试套件所提供的 Edit 标签的功能是一样的. 在 ...
- JavaScript 浏览器类型及版本号
项目中偶尔用到判断浏览器类型及相关版本问题,现记录相关代码: function getBrowserVertion(userAgent) { var browserName, browserVersi ...
- zxing .net 多种条码格式的生成
下载地址:http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具,使用非常方便. 本文主要说明一下多种类型条码的生成. 适用的场景,标签 ...
- windows 配置接收报文是否中断
作用:网络编程的时候,编程接收报文,可以不用循环等待并判断是否报文接收完整.配置了windows禁用网络中端后,自己写的程序一次接收,便是整条报文. 步骤: 1."打开网络和共享中心&quo ...
- linux搭建SS服务
基本准备: 购买主机:www.virmach.com LINUX系统操作经验:vim , apt-get 等命令的使用 putty.exe连接ssh工具的使用 开始 使用putty连接上去,并输入密码 ...
- (2环境架设)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...