在窗口級別監聽某些元素上的事件 - 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

回答

相關問題