dom对象中的this和event.target区别

最新推荐文章于 2022-09-17 14:14:17 发布
最新推荐文章于 2022-09-17 14:14:17 发布
阅读量265 收藏
点赞数
分类专栏： HTML 文章标签： html this event.target

dom对象中的this和event.target区别
1.this是事件冒泡，动态变化。先触发内部事件，由内到外的执行。

复制代码

<body>
    <div onclick="testdiv(this)" id="testdiv">
        <a href="#" onclick="testa(this)" id="testa">click me</a>
    </div>
</body>

复制代码
运行结果

2.event.target代表的是触发事件的dom对象，是静态不变的。

复制代码

<body onclick="testbody()">
    <div onclick="testdiv()" id="testdiv">
        <a href="#" onclick="testa()" id="testa">click me</a>
    </div>
</body>

复制代码
运行结果

总结：两者都代表dom对象，如果需要调用jquery的方法可以这样 ( t h i s ) , (this), (this),(event.target)。

泊一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM操作 以及this 与new
InLett_yj的博客
08-02 350
DOM:是指 文档对象模型 主要是指用来操作html文档 (Doucument Object Model) DOM 节点操作 操作DOM树 所有的节点都有父节点, 只有一个节点没有父元素(根节点)html 一个节点可以有多个子节点,但一个节点有且只有一个父节点 this 与 new 在function我们会经常遇到this，下面总结了一些规律来判断this的对象是谁： 全局作用域中的thi...
jquery dom this 对象 及 绑定事件
wahaha
08-30 883
1.jquery 和dom对象 jquery对象就是被$()包裹的对象 获取文本内容时使用text() dom对象就是 html网页 获取节点文本时使用textContent 2.jquery 和dom对象的判断 var domObj = document.getElementById("id")...
DOM基础(1)-EventTarget接口认识以及实现原理
xiongxiaolin123的博客
08-18 228
MDN链接： https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget EventTarget接口实现代码： // TEvent var TEvent = function () { this.listeners = []; } TEvent.prototype.listeners = null; TEvent.prototype.add = function(type, callback) { if (!(type i
DOM事件绑定的this问题
06-15 1181
先上几道面试题（我们公司面试前端的） 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
DOM——事件对象，this
Meat_doll的博客
07-20 142
来自上课讲的知识点，如有雷同可能是同学
jQuery中event.target和this的区别详解
11-20
　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target). 比如,一个很简单的例子. $(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成...
jquery 关于event.target使用的几点说明介绍
01-19
this和event.target的相同点this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target); 这使我想起了以前写的一个例子： 代码如下: //del event $(“.del”)...
JS和JQ的event对象区别分析
10-25
本篇文章将详细探讨JS和JQ中Event对象的区别，尤其是`click`事件下的差异。 首先，Event对象在JS和JQ中都提供了事件的基本信息，如`type`（事件类型），`timeStamp`（事件发生的时间戳）以及坐标信息（`clientX`, `...
jquery中event对象属性与方法小结
01-19
* .target 这个反应触发事件的DOM对象，可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX: 鼠标的left属性，相对于page * .pageY: 鼠标的top属性，相对于page * preventDefault
DOM事件中this的指向问题
hhhhhh__hh的博客
05-05 912
几种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指向以及修改this指向
m0_72694993的博客
09-17 223
4.总结：bind更改完this指向以后如果不写（）不会自动执行，适合在定时器用，apply和call会自动执行，apply和call的区别是，一个传入参数为数组一个不是；2.定时器中 this指向window（定时器中的函数不是箭头函数，如果是箭头函数就指向它的父元素）例如以下代码中f2为函数，所以this指向windows，如果为箭头函数的话指向对象。1.事件中 谁的事件this就是谁（当前）1.call(this指向,参数1,2)二、更改this指向。
2021-06-12 event.target的定义和它与this的区别
GAARA
06-12 764
什么是event.target.value? event 常用event(或eve,e等等)来接收事件对象 event.target 事件对象作为对象,有其属性和方法,其中target属性的作用是获取触发事件的目标,即绑定事件的元素 event.target.value 获得当前元素target属性的属性值 总结: event.value获取的是当前的(点击移动等等)事件)元素 event.target.value获取的是当前元素输入(或选择)的值 event.target和this的区别是什么? 区别:
this,target,currentTarget区别讲解
chuaizepipp202729的专栏
07-19 179
event.target 说明：引发事件的DOM元素。 this和event.target的区别 js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； this和event.target的相同点 this和event.tar...
JQuery 中this和$(this)获取对象、操作DOM对象的元素属性
热门推荐
逸尘的专栏
03-17 1万+
$("#row a img").each(function(index){ alert($(this)); alert(this); } //可以看出来$(this)是jquery对象，而this是DOM对象： alert($(this)); 弹出的结果是[object Object ] alert(this); 弹出来的是[objec
js中的this和jquery click传入dom对象
hanghangde的博客
02-07 4851
函数中的 this 指的是函数作为哪个对象的方法被调用，this 就是那个对象。当函数作为构造函数通过 new 来使用时，this 指当下新建的对象。通过 addEventListener 注册的事件回调函数中的 this 指的是事件所注册的对象。 比如说我有一段js var modifyCartProductNum = function (operate, that) { var t
e.target--- dom事件对象event
杨咩咩
03-15 2175
event不会事件冒泡，值作用于此节点对象，不会传递到父节点或子节点 标准属性： 属性 描述 bubbles 返回布尔值，指示事件是否是起泡事件类型。 cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget 返回其事件监听器触发该事件的元素。 eventPhase 返回事件传播的当前阶段。 target...
jq 获取dom对象this和event.target
ViolenceHK的博客
08-22 5665
几天学习Ajax,看别人在点击事件获取dom时用event.target获取,发现很多不知道的地方。 一、先说说区别 1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； 2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(even
Javascript DOM Event对象方法详解
郎涯技术
06-30 4229
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！ 1、事件句柄　(Event Handlers)       HTML4.0的新特性之一是能够使HTML事件触发浏览器中的行为，比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表，可将之插入 HTML
var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } })中 if (event) { alert(event.target.tagName) }的含义
最新发布
07-14
这段代码中的 `if (event) {...}` 表示在方法 `greet` 中，如果传入了 `event` 参数，则执行下面的代码块。 `event.target` 是一个指向触发事件的 DOM 元素的引用，`tagName` 是 DOM 元素的标签名。所以，`alert(event.target.tagName)` 的含义是弹出触发事件的 DOM 元素的标签名。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值