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. 【WebGL】《WebGL编程指南》读书笔记——第4章

    一.前言        今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文        Example1: 复合变换 在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...

  2. .bashrc:16: command not found: shopt配置环境变量时出错

    source .bashrc ------------------------------------------------------- .bashrc:: command not found: ...

  3. precmd:6: job table full or recursion limit exceeded

    使用GDC Data Transfer Tool下载10999个isoforms.quantification.txt文件时,写了shell循环的小脚本: cat all_id_file |while ...

  4. requireJS对文件合并与压缩(二)

    requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...

  5. 适合小白/外行的git与github最基础最浅显教程

    首先声明,这是适合小白/外行/初学者/学生看的最基础最简单的git与github教程,已经能使用svn,git等工具的朋友请不要看这篇文章来浪费时间了. 想进一步学习git的,推荐去廖雪峰博客学习. ...

  6. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  7. Tsung:开源多协议分布式负载&压力测试工具

    Main features High Performance: the load can be distributed on a cluster of client machines Multi-pr ...

  8. canvas 简易的加载进度条

    做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种. canvas + svg高低配,应该还不错的.顺便一提,canvas用来压缩图片也是么么哒的. 先看下效果图 ...

  9. Mysql:执行source sql脚本时,出现:error 2

    Centos下部署mysql: 1.yum -y install mysql*; 2.service mysqld start; 3.chkconfig mysqld on; 4.设置用户名和密码:m ...

  10. vb实验7-找出小于18000的最大素数

    vb实验7-找出小于18000的最大素数 vb实验7-找出小于18000的最大素数 ---–写给女朋友的题解 在窗体上画一个文本框,名称为TEXT1,两个命令按钮,C1和 C2,标题分别为" ...