[问题] jquery中,e.target跟this的差别?

楼主: NCKUFatPork (成大肥宅悲歌)   2018-01-19 16:31:19
小弟最近在练习jquery的fadeOut和remove
现在我在html档中有一个ul:
<li class="todoItem"><span class="delete"> x </span>bla</li>
我希望的功能是点了x之后list item会消失
所以我写的jquery如下:
$(".delete").click(e =>
$(e.target)
.parent().fadeOut(150, e => $(e.target).remove())
)
执行后有达到我预期的效果,
但看console会得到以下讯息:
TodoList.js:9 Uncaught TypeError: Cannot read property 'target' of undefined
at HTMLLIElement.$.parent.fadeOut.e (TodoList.js:9)
at HTMLLIElement.opt.complete (jquery-3.2.1.js:7236)
at fire (jquery-3.2.1.js:3317)
at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)
at tick (jquery-3.2.1.js:7079)
at Function.jQuery.fx.tick (jquery-3.2.1.js:7405)
at schedule (jquery-3.2.1.js:6783)
但我如果改写把上面的程式码稍微改写:
$(".delete").click(e =>
$(e.target)
.parent().fadeOut(150, function(){$(this).remove()})
)
那程式运行OK也不会出现上述的error讯息
我以为e.target跟this应该是一样的?
所以我不知道为什么会有这个差异。
想请问一下我的理解哪里有问题?
作者: jmlntw (吉米林)   2018-01-19 16:37:00
变量的 scope 问题,前者你没有把 e 传到 fadeOut 的 callback 里。
作者: WunoW (WunoW)   2018-01-19 17:36:00
改成fadeOut(150, () => $(e.target).remove())而e.target跟$(this)也不可能一样,$(this)是jquery物件
作者: eight0 (欸XD)   2018-01-19 18:05:00
先不问 e.target 和 this,你知道 e 是什么吗?
作者: EricTao   2018-01-19 18:32:00
e0大 可以给个关键字吗?
作者: comicat (可米猫)   2018-01-20 18:41:00
event
作者: xdraculax (首席怪叔叔)   2018-01-21 19:36:00
能用 this 就优先用 this 啊,一楼就正解了
作者: visa9527 (高级伴读士官长)   2018-01-23 12:22:00
this作用域每层都不一样,传 e 比较不会搞混
作者: xdraculax (首席怪叔叔)   2018-01-24 07:13:00
用 e 是自我设限,要嘛所有主动呼叫动作都要建成事件,要嘛还要代个假 e,多此一举

Links booklink

Contact Us: admin [ a t ] ucptt.com