开发者

get all elements with onclick in them?

开发者 https://www.devze.com 2022-12-31 06:42 出处:网络
I am looking for a way to list all elements that have onclick event on 开发者_如何学Ca page.Edited to answer further questions...

I am looking for a way to list all elements that have onclick event on 开发者_如何学Ca page.


Edited to answer further questions...


I'm not sure exactly what you're asking, but I suspect you're looking for a way to see if there has been code attached to an element's onclick event? If so, try this:

var allElements = document.getElementsByTagName('*');
for ( var i = 0; i<allElements.length; i++ ) {
    if ( allElements[i].className !== 'theClassNameYoureLookingFor' ) {
        continue;
    }
    if ( typeof allElements[i].onclick === 'function' ) {
        // do something with the element here
        console.log( allElements[i] );
    }
}

If you'd like some information about the actual function attached to the onclick event, you'll need to make use of Firebug or something similar to output the function and examine it as it will have been possibly generated at runtime (ie the function declaration might not just be sitting on the page where it could theoretically be accessed easily). Try using the code provided above, but instead of

console.log( allElements[i] );

do

console.log( allElements[i].onclick );

Now, in firebug, you can mouse over the functions it prints and see their code.


Answer from @Josh the Goods didn't work for me, I had to slightly modify it.

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
    if ($._data(allElements[i])['events'] != undefined 
        && $._data(allElements[i])['events']['click'] != undefined) {
        console.log(allElements[i]);
        for (var ii = 0; ii < $._data(allElements[i])['events']['click'].length; ii++) {
            console.log($._data(allElements[i])['events']['click'][ii].handler);
        }
    }
}


If you use jQuery >= 1.4, you can get an Array of all elements with onclick attribute by writing the oneliner:

$('body *').toArray().filter(function(el) { return $(el).attr('onclick') });


i need to get ... the parameters that are in each onclick

You can read the string value of the onclick attribute by using:

var onclickstr= allElements[i].getAttributeNode('onclick').value;

inside Josh's code (this is a slightly roundabout method, required for IE).

Of course it would only work for event handlers attached from inline event handler attributes, not assigned to the onclick property from JavaScript or added via addEventListener or attachEvent.

Trying to prise values out of a JavaScript code string is an ugly and unreliable hack that you shouldn't resort to unless there's really no other option. If the page is something you're generating yourself, you should instead use unobtrusive-scripting techniques. Omit inline event handler attributes like onclick completely (today they're considered bad practice) and attach handlers from JavaScript itself, using parameters stored in easier-to-access places like classname and other ‘spare’ attributes where necessary.


Get an array of all elements with an onclick attribute

   Array.from(document.querySelectorAll('[onclick]'))


This is fairly easy if the traditional/old school method of event handler attachment is used (the following code is untested).

var getEventHandlers = function(nodes, eventType) {
    var handlers = [], h;

    for ( var i=0, l=nodes.length; i<l; i++ ) {
        h = nodes[i].getAttribute(eventType);
        if ( typeof h === "function" ) {
            handlers.push(h);
        }
    }

    return handlers;
};

Use:

console.log(getEventHandlers($("*"), "onclick"));
console.log(getEventHandlers($(".some-class"), "onclick"));


For a succinct jquery selector, you could use $('[onclick]') however that would only get elements wit the onclick attribute set.

0

精彩评论

暂无评论...
验证码 换一张
取 消