Javascript 在jquery中处理事件bubling

iam具有如下所示的链接

<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a>
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a>
<a item='1' href='javascript:void(0)'><img class='icon3' /><span>text3</span></a>
<a item='1' href='javascript:void(0)'><img class='icon4' /><span>text4</span></a>


$(function(){
$('a').click(_handleClick);
});

function _handleClick(e)
{
var _item=$(e.target).attr('item');
// do something with _item variable
}

$（函数（）{
$（'a'）。单击（_handleClick）；
});
函数_handleClick（e）
{
var_item=$（e.target）.attr（'item'）；
//使用_item变量执行某些操作
}

---

//现在我的问题是，当用户单击在_handleclickis image中接收的图像“e”时，我无法读取attr='item'，那么如何使事件冒泡以读取该值。

尝试此操作，而不是直接单击目标：

$(function(){
  $('a').click(function() {
    var _item = $(this).attr('item');
    // do something with _item variable        
  });
});

---

尽管对所有父元素触发了

click

事件，但是

e.target

仍然是单击的源，您单击的原始最深的子元素…jQuery使用

$（this）

处理该事件，无需担心下面的哪个子元素触发了它。

尝试此操作，而不是直接执行click目标：

$(function(){
  $('a').click(function() {
    var _item = $(this).attr('item');
    // do something with _item variable        
  });
});

---

尽管对所有父元素触发了

click

事件，但是

e.target

仍然是单击的源，您单击的原始最深的子元素…使用

$（this）

的jQuery处理该事件，不必担心下面哪个子元素触发了它。

您根本不需要对事件冒泡进行任何处理，因为附加了事件处理程序的“a”元素也存储了“item”属性。在这种情况下，您只需使用“this”来引用带有click事件的项，而$（this.attr（'item'）将检索“item”的值

这一行：

var _item=$(e.target).attr('item');

应该是：

var _item=$(this).attr('item');

编辑：澄清第一句，并添加以下信息：

为了澄清，事件冒泡在jQuery中是自动的。如果单击元素的子元素，事件将一直冒泡到顶部，并在执行过程中触发事件

有时您需要使用

事件停止触发。stopPropagation（）

在其他时候，它也会派上用场。例如，考虑一个有100个孩子的“div”，所有这些都应该接收相同的点击事件。您可以将1个单击事件分配给父级，然后使用event.target确定实际单击的是哪个，而不是消耗维护这100个子级的事件处理程序所需的所有资源

---

这种方法的另一个优点是，在向父级动态添加其他子级时，不必使用live（）。由于它们都是由于冒泡而触发父级的click事件，因此它们已准备就绪。

您根本不需要对事件冒泡进行任何处理，因为附加了事件处理程序的“a”元素也存储了“item”属性。在这种情况下，您只需使用“this”来引用带有click事件的项，而$（this.attr（'item'）将检索“item”的值

这一行：

var _item=$(e.target).attr('item');

应该是：

var _item=$(this).attr('item');

编辑：澄清第一句，并添加以下信息：

为了澄清，事件冒泡在jQuery中是自动的。如果单击元素的子元素，事件将一直冒泡到顶部，并在执行过程中触发事件

有时您需要使用

事件停止触发。stopPropagation（）

在其他时候，它也会派上用场。例如，考虑一个有100个孩子的“div”，所有这些都应该接收相同的点击事件。您可以将1个单击事件分配给父级，然后使用event.target确定实际单击的是哪个，而不是消耗维护这100个子级的事件处理程序所需的所有资源

---

这种方法的另一个优点是，在向父级动态添加其他子级时，不必使用live（）。由于它们都因冒泡而触发父级的click事件，因此它们已准备就绪。

var\u item=$（e.target）.parents（'a'）.attr（'item'）
var\u item=$（e.target）.parents（'a'）.attr（'item'）
但锚定标记中有两个元素，它们可能是事件的实际接收者。查找父锚点的另一个答案更接近，尽管单击“戳穿”锚点并非不可能。@Pointy-事件附加到“a”元素。不管实际目标是什么，都会在“a”上调用事件处理程序。正是事件冒泡导致了这种情况。我回答的第一句话有点欺骗性，所以我将对它进行调整。但是锚标签中有两个元素，它们很可能是事件的实际接收者。查找父锚点的另一个答案更接近，尽管单击“戳穿”锚点并非不可能。@Pointy-事件附加到“a”元素。不管实际目标是什么，都会在“a”上调用事件处理程序。正是事件冒泡导致了这种情况。我的答案的第一句话有点欺骗性，所以我将对它进行调整。这是一个更好的答案，尽管事件可能不可能直接在锚标签上触发。我认为最好检查目标元素是否为锚点，如果不是，则使用“parents（'a'）”来查找。无需考虑目标的父元素，因为事件将自动冒泡到具有“item”属性的同一元素。这是一个更好的答案，虽然事件可能不可能直接在锚标记上触发。我认为最好检查目标元素是否为锚点，如果不是，则使用“parents（'a'）”来查找。无需考虑目标的父元素，因为事件将自动冒泡到具有“item”属性的同一元素。