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元素对象引用,因为 ...
随机推荐
- 开发过程遇到的bug
1.transition和display的冲突: 解决方法:1)使用visibility:2)使用js的setTimeout使动画延迟:3)可以改变高度: 2.form表单提交和js中的提交冲突 解决 ...
- TreeMap源码
一.TreeMap简介 TreeMap是基于红黑树的java版实现,作者Josh Bloch and Doug Lea(这二人在java发展的早期做了重大贡献,比如集合框架JDK1.2.并发包JDK1 ...
- uEditor富文本编辑器
在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置. 我采用的方式:----不建议全部取消严格模式,因为一些插件必须要再严格模式才能运行的 对UEditor的严格模式报错文件,取 ...
- angularjs 字段排序 多字段排序
我们用angularjs {{}},ng-model循环绑定数组或对象的内容的时候,有时候会用到排序,有时候可能会有多个字段排序 具体要用到过滤 数据的展现,可以通过ng-repeat实现.当网页解析 ...
- 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包
公司最近开发的一个微信语音红包,就是前些时间比较火的包你说红包小程序.如何提高识别的精准度呢. 在说精准度之前,先大概说下整个语音识别的开发流程.前面我有文章已经说到过了.具体我就不谈了.一笔带过. ...
- SQL Server(解决问题)已成功与服务器建立连接,但是在登录过程中发生错误。(provider: Shared Memory Provider, error:0 - 管道的另一端上无任何进程。
http://blog.csdn.net/github_35160620/article/details/52676416 如果你在使用新创建的 SQL Server 用户名和密码 对数据库进行连接的 ...
- 转载:DNS解析过程详解
2015-09-20 此好文是转载,如有侵权联系我,立马删掉 DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com. ...
- mysql目录迁移 更改mysql的存储目录
元旦节刚过完回来,忙了一天,现在的时间剩余不是很充足,所以更新简短的文章一篇! 正文: 正常情况下mysql的存储目录都是在/var/lib/mysql/下的,那么怎么将存储位置改到/data_mys ...
- MyEclipse过期后怎么破解
方法一:写一个程序生成Subscriptioncode import java.io.*; public class MyEclipseGen { private static final Strin ...
- 【转】Python 爬虫的工具列表【预】
这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...