jQuery中event.target和this的区别——冒泡
2017-04-18 10:23
555 查看
为什么会区分event.target 和 this ,
根本原因是,
js事件会冒泡,this是会改变的,而event.target是不会改变的,是谁调用,就指向触发事件的DOM元素本身
举个栗子,比如div元素里面有一个span元素,想要点击谁,谁背景颜色就变成橘色,那么我们肯一般会简单直接写成
事实上因为js冒泡机制,最终实现的效果是点击内部span元素的时候,外面的div元素 也 变成了橘色
所以这时需要阻止冒泡
方法一:使用event.target
延伸:
方法二:直接返回扔掉
方法三:使用event.stopPropagation();
根本原因是,
js事件会冒泡,this是会改变的,而event.target是不会改变的,是谁调用,就指向触发事件的DOM元素本身
举个栗子,比如div元素里面有一个span元素,想要点击谁,谁背景颜色就变成橘色,那么我们肯一般会简单直接写成
$("div, input").click(function () { $(this).css("background-color", "orange"); });
事实上因为js冒泡机制,最终实现的效果是点击内部span元素的时候,外面的div元素 也 变成了橘色
所以这时需要阻止冒泡
方法一:使用event.target
$("div, input").click(function (event) { $(event.target).css("background-color", "orange"); });
延伸:
if (event.target == this){ doSometing(); }
方法二:直接返回扔掉
$("div, input").click(function (event) { $(this).css("background-color", "orange"); return false; });
方法三:使用event.stopPropagation();
$("div, input").click(function (event) { $(this).css("background-color", "orange"); event.stopPropagation(); });
相关文章推荐
- jquery中event.target和this的区别——冒泡
- jquery中this和event.target的区别
- JQuery中this和event.target的区别
- jQuery 事件注册和绑定及this与event.target的区别浅析
- JQuery中this和event.target的区别
- jQuery中 this与event.target区别
- jquery Event target currentTarget区别
- 浅谈jQuery使用this和event.target
- jquery之event.target vs this
- this和event.target的区别
- jquery获取任意点击到的对象,绑定点击函数event.target 不能用this
- jquery中this与$(this)的用法区别.
- Event中target与currentTarget的区别
- AS3中Event的target和currentTarget的区别
- JQuery -- this 和 $(this) 的区别
- Event.target和Event.currentTarget之间的区别
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- AS3中Event的target和currentTarget的区别
- JQuery this 和 $(this) 的区别
- jQuery中this与$(this)区别