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

发布于 2024-12-03 16:59:27 字数 538 浏览 4 评论 0原文

我想在窗口或文档级别侦听

元素上的事件，因为此类元素太多，无法为每个元素附加 onclick 事件处理程序。

这就是我所得到的：

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

我需要关于上面代码的建议，它好吗？另外，除了检查 nodeName 之外，如何检查单击的元素是否是

元素？例如，如果

元素包含 元素并且被单击，则 nodeType 将为 b 而不是 <代码>p。

谢谢。

原文

I want to listen for events on <p> elements at window or document level as there are too many such elements to attach an onclick event hander for each.

This is what I've got:

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

I need advice on the code above, is it good?
And also, how can I check if the clicked element is a <p> element other than checking nodeName?
For example, if the <p> element contains a <b> element and that is clicked, the nodeType will be b not p.

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡Ms空城旧梦 2024-12-10 16:59:27

考虑一下：

(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/

Consider this:

(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;

})();

Live demo: http://jsfiddle.net/xWybT/

回复收藏 0 原文

想挽留 2024-12-10 16:59:27

我觉得很好，你可以这样检查

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

I think it is good, and you can perform checking this way

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

回复收藏 0 原文

猫腻 2024-12-10 16:59:27

如果我是你，我会像注册“点击”事件一样注册“加载”事件。这是一种更现代的事件处理方式，但某些较旧的浏览器可能不支持。

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

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

If I was you I'd register for the "load" event in the same way that you are for "click". It's a more modern way of event handling, but might not be supported by some older browsers.

Checking the nodeName is the best way to interrogate the node:

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

回复收藏 0 原文

~没有更多了~