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元素对象引用,因为 ...
随机推荐
- Linux Centos 使用 yum 安装java
centos 使用 yum 安装java 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | grep -E '^op ...
- rm 命令详解
rm 作用: 删除一个目录中的一个或多个文件或目录,也可以将某个目录及下属的所有文件及子目录均删除掉, 对于连接文件只是删除整个连接文件,而保持原有文件. 注意: 使用rm 命令要格外小心,因为一旦 ...
- 2.Nginx日常维护技巧
Nginx日常维护技巧 Nginx配置正确性检查 nginx提供了配置文件调试功能,可以快速定义配置文件存在的问题.执行如下命令检测配置文件的正确性: [root@localhost 桌面]# whi ...
- .NET使用存储过程实现对数据库的增删改查
一.整体思路 先建立存储过程,再通过.net 调用存储过程,来实现对表的增删改查. 二.新建数据库及存储过程 打开SqlServer2008,新建数据库orm1,及表Student. 数据库和表建立好 ...
- UNIX域协议(命名套接字)
这里主要介绍命名UNIX域套接字 1.什么是UNIX域套接字Unix域协议并不是一个实际的协议族,而是在单个主机上执行客户/服务通信的一种方式.是进程间通信(IPC)的一种方式.它提供了两类套接字:字 ...
- FPGA设计思想与技巧(转载)
题记:这个笔记不是特权同学自己整理的,特权同学只是对这个笔记做了一下完善,也忘了是从那DOWNLOAD来的,首先对整理者表示感谢.这些知识点确实都很实用,这些设计思想或者也可以说是经验吧,是很值得每一 ...
- 在linux环境下编译运行OpenCV程序的两种方法
原来以为在Ubuntu下安装好了OpenCV之后,自己写个简单的程序应该很容易吧,但是呢,就是为了编译一个简单的显示图片的程序我都快被弄崩溃了. 在谷歌和上StackOverFlow查看相关问题解答之 ...
- Django学习日记07_Admin
django.contrib django.contrib是django中附带的一个工具集,由很多的附加组件组成.这些附加组件包括管理工具(django.contrib.admin).用户鉴别系统(d ...
- PHP 微信公众号-创建菜单-配置
1.服务号 2.基本配置 注意: URL: 确保能访问到你对应的文件 Token:随意设置,但是要与文件里的一致 3.网页授权 注意:填写网站域名 4.更具实际需求创建菜单
- 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...