在窗口级别监听某些元素上的事件 - Javascript，no library

我想在窗口或文档级别监听<p>元素上的事件，因为有太多这样的元素为每个元素附加onclick事件处理程序。在窗口级别监听某些元素上的事件 - Javascript，no library

这是我的本钱：

window.onload=function() 
{ 
    window.addEventListener('click',onClick,false); 
} 
function onClick(event) 
{ 
    alert(event.target.nodeName.toString()); 
}

我需要在上面的代码的意见，岂不是好？而且，如何检查点击的元素是否是<p>元素，而不是检查nodeName？例如，如果<p>元素包含<b>元素并且被单击，则nodeType将是b而不是p。

谢谢。

来源

2011-09-10 Francisc

是否有不使用特定的原因任何图书馆？像jQuery或YUI委托这样的框架可以让你使用这个简单。只是好奇。 – momo

嘿。将运行的环境不允许加载外部脚本。唯一的办法是将jQuery代码直接粘贴到HTML文件中，但这看起来像是一个矫枉过正的事情。 – Francisc

@Francisc：不要忘记在'Event'对象上没有'target'属性的较老的IE（至少IE 7）。在事件中使用'var target ='target'之类的东西？ event.target：event.srcElement;'[srcElement]（http://msdn.microsoft.com/en-us/library/ms534638%28v=vs.85%29.aspx）。他们也缺少'addEventListener'方法 - 使用[attachEvent]（http://msdn.microsoft.com/en-us/library/ms536343%28v=vs.85%29.aspx）。 – Saxoier

，我认为这是件好事，并且可以执行检查这样

var e = event.target 
while (e.tagName != 'P') 
    if (!(e = e.parentNode)) 
     return 
alert(e)

来源

2011-09-10 22:39:34 Leonid

谢谢你，'SomeGuy'。 – Francisc

如果我是你，我会为你是“点击”用同样的方法“load”事件登记。这是一种更现代的事件处理方式，但可能不被某些旧版浏览器支持。

检查节点名称是询问节点的最佳方式：

function onClick(event) { 
    var el = event.target; 
    while (el && "P" != el.nodeName) { 
     el = el.parentNode; 
    } 
    if (el) { 
     console.log("found a P!"); 
    } 
}

来源

2011-09-10 22:42:19

考虑一下：

(function() { 

    // returns true if the given node or any of its ancestor nodes 
    // is of the given type 
    function isAncestor(node, type) { 
     while (node) { 
      if (node.nodeName.toLowerCase() === type) { 
       return true; 
      } 
      node = node.parentNode; 
     } 
     return false; 
    } 

    // page initialization; runs on page load 
    function init() { 

     // global click handler 
     window.addEventListener('click', function (e) { 
      if (isAncestor(e.target, 'p')) { 
       // a P element was clicked; do your thing 
      } 
     }, false); 

    } 

    window.onload = init; 

})();

现场演示：http://jsfiddle.net/xWybT/

来源

2011-09-10 22:58:56

在窗口级别监听某些元素上的事件 - Javascript，no library

回答

相关问题