Question

在javascript编码中，有一种事件委托技术。

这是委派我只知道的事件的方式：

向父亲elem发送一个事件（如点击），并使用＆＃39; target＆＃39;来获取该事件。

例如：

document.addEventListener('click', function(event), true/false);

function(event){
get event codes;
get target codes;

switch (target.id) {
case 'outside_1': blah~~~; break;
case 'outside_2': blah~~~; break;
}}

在这些代码中，如果target有一个子节点并单击它，则事件将不会运行。

情况：点击<a> ;;

case 1: <a id="outside_1"> nav 1 </a>  // this will work.

case 2: <a id="outside_2"> <img class="navImg"> <p> nav 2 </p> </a>   // this will not work.

如果没有办法制作代码：案例2＆＃39;工作，我认为委托事件技术不是js编码的好方法......

你觉得怎么样？伙计们？

Answer 1

因为事件已经一直冒泡到文档级别（假设你已经在泡沫阶段附加了处理程序;如果没有，那么问题没有意义，因为那不是事件委托的工作方式），所有你需要做的是检查是否：

事件目标是标识为您要处理其事件的元素，或
事件目标是委派元素的后代。

在现代浏览器中，这非常简单。假设您希望在<a>元素上捕获ID为“outside_2”的“点击”事件。在WebKit浏览器中看起来像：

document.addEventListener('click', function(event) {
    var target = event.target;
    if (target.webkitMatchesSelector("#outside_2, #outside_2 *")) {
        // yes, handle event
    }
}, false);

这是一个方便的功能，可以为任何元素提供“匹配”功能：

function matcher(element) {
  var names = [
      "matches",
      "matchesSelector",
      "webkitMatchesSelector",
      "mozMatchesSelector",
      "msMatchesSelector",
      "oMatchesSelector"
  ];
  for (var i = 0; i < names.length; ++i) {
      if (element[names[i]])
          return element[names[i]].bind(element);
  }
  throw new Error("No matches facility in this environment.");
}

然后处理程序可以适用于所有（现代）浏览器：

document.addEventListener('click', function(event) {
    var target = event.target;
    if (matcher(target)("#outside_2, #outside_2 *")) {
        // yes, handle event
    }
}, false);

“匹配”方法适用于所有现代浏览器（IE9 +）。

事件委托技术在普通情况下真的没用吗？

1 个答案: