Question

我有没有任何attr的p标签。我向p tag.in控制台添加了2个事件我可以用getEventListeners（）函数获取事件。但我不想要那个。在我的代码中我检查p是否有事件然后控制台“是” “但我不知道它是哪个事件。我怎么能发现事件？我想要事件点击或鼠标悬停的名称。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nam mollitia officiis deleniti quae quos. Nulla voluptate, quibusdam dolor vero sed voluptatum, incidunt eum dicta, iste beatae animi inventore repudiandae.</p>

p[0].addEventListener("click",function () {
    /* body... */
    p[0].style.color="green";
    p[0].style.fontSize="24px";
})

p[0].addEventListener("mouseover",function () {
    /* body... */
    p[0].style.color="red";
    p[0].style.fontSize="12px";
})

Answer 1

JS并不是那么做，并且getEventListeners（）并没有得到很好的支持。有些图书馆保留了它们的清单，但是他们不会知道通过其他方式附加的事件（即香草js）。
唯一的方法似乎是如果你在addEventListener周围创建一个包装器并使用它来缓存它在某些东西上的东西。

你可以（但请不要）做这样的事情（没有经过测试，不确定是否有效）：

Element.prototype.setEvent = function(eventName, eventAction) {
    this.eventList = this.eventList || [];

    this.addEventListener(eventName, eventAction);
    this.eventList.push(eventName);
};

然后您可以使用setEvent而不是addEventListener，并且可以从.eventList访问事件侦听器列表。

修改对象（例如Element.prototype）虽然是一种反模式，但我不推荐它。

更好的办法是

/**
 * Adds an event to elements matching a selector, then saves them in a data attribute.
 * @param {String} elements - the selector (e.g. 'p')
 * @param {String} eventName - the event (e.g. 'click')
 * @param {Function} eventAction - the function to invoke when the event occurs
 */
writeSearchableEvent = function(elements, eventName, eventAction) {
    elements = document.querySelectorAll(elements);

    for (var i = 0; i < elements.length; i++) {
        var eventData = {
            event: eventName,
            action: eventAction
        };

        elements[i].addEventListener(eventName, eventAction);
        elements[i].setAttribute('data-attached-events', eventData);
    }
};

当然你需要修改数据属性的处理方式，但希望这可以给你一个想法。

Javascript检查元素中的事件处理程序

1 个答案: