DOM里的this 和event.srcElement区别

最新推荐文章于 2022-07-20 17:25:06 发布
最新推荐文章于 2022-07-20 17:25:06 发布
阅读量735 收藏
点赞数
分类专栏： DOM 文章标签： button table input html function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allenlily/article/details/7294486
版权

先来看一个例子:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
     <input id="Button1" type="button" value="button1" οnclick="alert(event.srcElement.value)" />  
     <input id="Button2" type="button" value="button2" οnclick="alert(this.value)" />    
</body>
</html>


结果:输出"button1"和"button2",两者都能获取事件的value

 

把this和event.srcElement都放在调用函数中

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        function thistest() {
            alert(this.value);
        }
        function srctest() {
            alert(event.srcElement.value);
        }
        
    </script>
</head>
<body>
    <input type="button" value="button1" οnclick="thistest()">
    <input type="button" value="button2" οnclick="srctest()">
</body>
</html>


结果:this.text()输出"undefined" ,srctest()输出"button2",

结论:this是监听当前的事件的对象,而event.srcElement是引发事件的对象.

验证:采用冒泡事件

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>    
 		<table id="table" οnclick="alert(this.id)">
        <tr id="tr" οnclick="alert(this.id)">
            <td id="td" οnclick="alert(this.id)">猛点击我吧</td>
        </tr>
    </table>
</body>
</html>

依次显示"td","tr","table",证明this是获取当前事件的对象

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>    
 		<table id="table" οnclick="alert(event.srcElement.id)">
        <tr id="tr" οnclick="alert(event.srcElement.id)">
            <td id="td" οnclick="alert(event.srcElement.id)">猛点击我吧</td>
        </tr>
       </table>
</body>
</html>


全部显示"td",因为srcElement 是获得引发事件的对象




 

allenlily
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
替代window.event.srcElement效果的可兼容性的函数
05-04
getEvent()方法可模拟window.event效果
DOM事件中this的指向问题
hhhhhh__hh的博客
05-05 888
几种DOM事件绑定方式下的this指向 1 通过在标签中指定 方法1： <script> function test() { console.log(this); } </script> <button onclick="test()">点我</button> 结果指向window对象 方法2：将this传递给事件处理函数 <button onclick="test(this)">点我</butto
DOM和this指向
HAI6545的博客
01-07 570
DOM ---- 一套操作html文档的标准 - 操作标签的方法 1.获取标签元素 /*document.getElementById(id名) document.getElementsByTagName(标签名) document.getElementsByClassName(类名) document.getElementsByName(name属性的值) document.querySelector(css选择器) document.querySelectorAll(css选择器) */ 2.属性
Javascript 中的 this 和 event.srcElement 的区别
weixin_30367873的博客
08-18 105
学习交流，欢迎转载。转载请注明文章来源：http://www.cnblogs.com/lgjspace/archive/2011/08/09/2131643.html 　　window.event.srcElement 属性可以用来获得触发事件的源对象，我自己碰到过的用得最多的其中一个场合就是：在需要让多个事件共享一个事件响应函数时，可以遍历所有相关的对象，把每个相关对象和 windo...
DOM(10)——this
qq_34573534的博客
08-18 200
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。 this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcE...
JavaScript DOM中event对象的type,srcElement属性
weixin_30682415的博客
04-06 142
<image src="1.jpg" /> <Script type="text/javascript"> function ImageChange(evt) { 只对IE有效: var eventName=event.type; //事件的类型 var srcEl...
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
10-24
对于js初学着必须理解this和srcElement的应用，这也是面试中经常考到的。下面我们就通过几个示例来详细了解下
window.event.srcElement 得到事件源对象
12-10
不过好像event.srcElement在ff里不起作用 比如 span div event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象。比如你设定[removed] = myfunc;这时所有页面点击的事件都交给myfunc处理，在...
event.srcElement 用法笔记e.target
09-05
event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
js事件源window.event.srcElement兼容性写法(详解)
10-21
下面小编就为大家带来一篇js事件源window.event.srcElement兼容性写法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DOM——事件对象，this
Meat_doll的博客
07-20 138
来自上课讲的知识点，如有雷同可能是同学
Dom的常用方法/单位/url src href:
weixin_39191274的博客
07-27 368
Dom的常用方法 获取方法：document.getElementById() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。：getElementByTagName() 把新的子节点添加到指定节点。：appendChild() 删除子节点：removeChild() 替换子节点。：replaceChild() 在指定的子节点前面插入新的子节点。：insertBefo...
DOM事件绑定的this问题
06-15 1171
先上几道面试题（我们公司面试前端的） 1. <input id="name" type="text" value="name" onclick="alert(this.value);" /> <input id="name" type="text" value="name" value="Laruence" /> function showValue() { alert(this); }; document.getElementById('name').onclick
HTML DOM Event 对象之（toElement、fromElement、event.srcElement、event.target）
Vivianluolita的专栏
12-15 8762
http://www.w3school.com.cn/jsref/dom_obj_event.asphttp://blog.sina.com.cn/s/blog_9211608d01018mds.htmlhttps://zhidao.baidu.com/question/753343911159507324.htmlhttp://www.jb51.net/article/44571.htmhttp:
Js中的this和window.event.srcElement
lyg的专栏
08-25 3271
我们先看一个简单的例子： alert(this.value)"/>完全没有问题。   那么什么情况下不可以用？ fuction method() {    alert(this.value); } method()"/>这个就不可以，因为method()是被响应函
obj.onmousedown = function(event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#1AAB8A") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#E15650") { num2 = num2 + 300; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#121B39") { num3 = num3 + 400; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#80A84E") { num4 = num4 + 500; } //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 //显示得分 num=num1+num2+num3+num4; count.innerHTML = '当前得分: ' + num; } 为什么错了
最新发布
05-24
event.target : event.srcElement).style.backgroundColor == "rgb(26, 171, 138)") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(225, 86...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值