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元素对象引用,因为 ...
随机推荐
- css各种布局
1.水平居中 前提:父容器.parent 和子容器.child 1)使用text-align和inline-block .parent{text-aling:center}; .child {disp ...
- Jmeter+Ant+Jenkins接口自动化测试(一)_环境部署
前言: 2017年最后一个月份,今天抽出时间把之前的一些记录分享出来,也为今年画上个简单的句号吧,无论好与坏,无论成功与失败,简单的记忆,不要留下点点空白. 特别提示: 知识是用来分享的,但是也要尊重 ...
- Ubuntu配置Django+ Apache2+ mysql
# 我的Ubuntu上自带的python3.5,所以安装一下 python3.6sudo add-apt-repository ppa:jonathonf/python-3.6sudo apt-get ...
- Linux(CentOS6.5)下编译安装Nginx1.10.1
首先在特权账号(root)下安装编译时依赖项: yum install gcc gcc-c++ perl -y 首先以非特权账号(本文以账号comex为例)登陆OS: 进入data目录下载相关安装 ...
- 正确使用volatile场景--状态标志
同步机制:volatile 特点:可见性:不具备原子性 每个线程有自己单独的内存:如果线程1和线程2公用一个变量name:如果两个线程并发进行,并且需要访问变量name:如果这个变量具有了可见性,线程 ...
- Fiddler 抓包https配置 提示creation of the root certificate was not successful 证书安装不成功
在使用Fiddler抓包时,我们有时需要抓https协议的包,这种需要配置一下 开启监控https才可以 首先 找到Tools——>Options 在弹出的菜单中 选择https项 勾选捕捉h ...
- react看这篇就够了(react+webpack+redux+reactRouter+sass)
本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...
- ES6(四)字符串的扩展
1.字符的表示方式 最早在 \u0000-\uFFFF 之间的字符已经足够使用吗,每个字符占两个字节,超出范围,必须使用双字节形式表达, 即每个字符占四个字节.超出范围的字符,会被解读成 \uXX ...
- Python Tkinter模块 Grid(grid)布局管理器参数详解
在使用Tkinter模块编写图像界面时,经常用到pack()和grid()进行布局管理,pack()参数较少,使用方便,是最简单的布局,但是当控件数量较多时,可能需要使用grid()进行布局(不要在同 ...
- Head First设计模式之目录
只有沉淀.积累,才能远航:沉沉浮浮,脚踏实地. 这本书已经闲置了好久,心血来潮,决定写个目录,让自己坚持看完这本书 创建型模式 抽象工厂模式(Abstract factory pattern): 提供 ...