{"id":394,"date":"2013-12-03T07:25:54","date_gmt":"2013-12-03T06:25:54","guid":{"rendered":"https:\/\/devpath.pro\/?p=394"},"modified":"2013-12-03T07:25:54","modified_gmt":"2013-12-03T06:25:54","slug":"retrieve-js-events-how-to-get-all-of-them","status":"publish","type":"post","link":"https:\/\/fabiocicerchia.it\/web\/retrieve-js-events-how-to-get-all-of-them","title":{"rendered":"Retrieve JS Events: how to get all of them"},"content":{"rendered":"\n<p>I was trying to face an apparently huge problem, collect all the events <strong>bound<\/strong>\u00a0to the DOM elements. Then I realised that the main\u00a0<em>obstacle <\/em>was the\u00a0<em>browser<\/em>, yes the browser.<br \/>Because of the way the browser manage the events.<\/p>\n\n\n\n<p>So I started my research about it, nothing came from Google or StackOverflow.<\/p>\n\n\n\n<p>This answer made me think and for a second I was about to give up on that:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Event handlers attached using DOM Level 2 Events addEventListener methods and IE&#8217;s attachEvent cannot currently be retrieved from script at all. DOM Level 3 once proposed element.eventListenerList to get all listeners, but it is unclear whether this will make it to the final specification. There is no implementation in any browser today.<\/p>\n<p>&#8212;\u00a0<a href=\"http:\/\/stackoverflow.com\/a\/2623352\/888162\">bobince<\/a><\/p>\n<\/blockquote>\n\n\n\n<p>There are few ways to bind an event we should focus on:<\/p>\n\n\n\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/html401\/interact\/scripts.html#h-18.2.3\"><code>on*<\/code><\/a>\u00a0HTML attribute<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/EventTarget.addEventListener\"><code>element.addEventListener<\/code><\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ie\/ms536343(v=vs.85).aspx\"><code>element.attachEvent<\/code><\/a><\/li>\n<\/ul>\n\n\n\n<p>The last 2 are not possible to be retrieved without some workarounds because they are <strong>handled internally<\/strong>\u00a0by the browser and they don&#8217;t leave any trace in the DOM.<\/p>\n\n\n\n<p>I&#8217;ve developed a\u00a0<em>plain JS class<\/em>\u00a0while I was facing this problem when working on my own project\u00a0<strong><a href=\"http:\/\/web.archive.org\/web\/20150901130936\/http:\/\/www.salmonjs.org\/\">salmonJS<\/a><\/strong>, a\u00a0<em>web spider<\/em>\u00a0which is using\u00a0<em>PhantomJS<\/em>\u00a0and\u00a0<em>Node.js<\/em>. So I came with this solution which seems to be the most appropriate one to run on PhantomJS (and I believe it works fine with\u00a0<em>CasperJS<\/em>\u00a0as well).<\/p>\n\n\n\n<p>My personal approach was\u00a0<strong>overriding the default behaviour<\/strong> at the beginning of the page load, so nothing else can try to bind an event before initialising the &#8220;interceptor&#8221;.<\/p>\n\n\n\n<p>There is nothing that needs to be configured to make it work, just include it in your page before EVERYTHING else.<\/p>\n\n\n\n<p>You can collect at any time the events just calling:<\/p>\n\n\n\n<pre>var events = eventContainer.getEvents();<\/pre>\n\n<p>https:\/\/gist.github.com\/fabiocicerchia\/7116129<\/p>","protected":false},"excerpt":{"rendered":"<p>I was trying to face an apparently huge problem, collect all the events bound\u00a0to the DOM elements. Then I realised that the main\u00a0obstacle was the\u00a0browser, yes the browser.Because of the way the browser manage the events. So I started my research about it, nothing came from Google or StackOverflow. This answer made me think and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[14],"tags":[33,74,12,75,76],"aioseo_notices":[],"author_meta":{"display_name":"fabio","author_link":"https:\/\/fabiocicerchia.it\/author\/fabio"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">dom<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">events<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">javascript<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">nodejs<\/a>","<a href=\"https:\/\/fabiocicerchia.it\/category\/web\" class=\"advgb-post-tax-term\">phantomjs<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">dom<\/span>","<span class=\"advgb-post-tax-term\">events<\/span>","<span class=\"advgb-post-tax-term\">javascript<\/span>","<span class=\"advgb-post-tax-term\">nodejs<\/span>","<span class=\"advgb-post-tax-term\">phantomjs<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 10 years ago","modified":"Updated 10 years ago"},"absolute_dates":{"created":"Posted on December 3, 2013","modified":"Updated on December 3, 2013"},"absolute_dates_time":{"created":"Posted on December 3, 2013 7:25 am","modified":"Updated on December 3, 2013 7:25 am"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/394"}],"collection":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":0,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"wp:attachment":[{"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiocicerchia.it\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}