Path: csiph.com!aioe.org!news.mixmin.net!weretis.net!feeder4.news.weretis.net!feeder5.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: Why does savepng workl with eventlistener but not by call from form? Date: Fri, 11 Nov 2016 16:21:57 +0100 Organization: PointedEars Software (PES) Lines: 46 Message-ID: <2585978.VdNmn5OnKV@PointedEars.de> References: <58b433c6-37a6-45de-bc70-05ec835510ff@googlegroups.com> <17n7y8md13g1b$.kznrbim03ls$.dlg@40tude.net> <44ed50a0-c2bf-4167-9ecb-be7e0f8e9ec7@googlegroups.com> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1478877719 23382 eJwFwYEBADAEA7CbKMU5NvP/CUscFN4wOs3XN96Taj2qie0jWpkyJDAYj6tRRgbSRdusPw6XEBo= (11 Nov 2016 15:21:59 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Fri, 11 Nov 2016 15:21:59 +0000 (UTC) User-Agent: KNode/4.14.2 X-User-ID: eJwNwoERwCAIBLCVEHiw4wgv+49gc4HFik4PhGMwnSqgzoIdXkFdDNU8kc6ogv8nrY50sspEZnF/6trF3g9YJBXc X-NNTP-Posting-Host: eJwFwYEBwCAIA7CXQGnFcwbY/09Ygk1nnyAYELT9Tn5axaPlWQGMJWZ4jS+r3yBStirNXf0DF9ERCA== Cancel-Lock: sha1:w/bca0QvdYbguci7owxWE7EaPCc= Xref: csiph.com comp.lang.javascript:31698 JJ wrote: > On Fri, 11 Nov 2016 06:35:50 -0800 (PST), jonas.thornvall@gmail.com wrote: >> Could you explain >> document.getElementById("pushit").addEventListener("click",savepng); > > It attach an event handler (function) to the "click" event of the element > with ID "pushit". > > The code produces the same functionality as below code No. > (but different method of attaching an event handler). In this case, it > assign a function to an event handler variable. This is an older method. > > document.getElementById("pushit").onclick=savepng; AISB, at least in Chromium this replaces the first event listener that had not been added with addEventListener(), if any, so that the referred function is called *after* all other event listeners. Try this: var obj = document.getElementById("pushit"); obj.onclick = function () { console.log(1); }; obj.addEventListener("click", function () { console.log(2); }, false); obj.onclick = function () { console.log(3); }; When you click the element (and navigation to another document is not the default action), the console would show “2” followed by “3”. > When you click something, a "click" event is generated to the clicked > element. All "click" event's handler functions for that element will be > called, regardless of their function name. The proper term is event _listener(s)_. And as the “click” event bubbles, if its propagation upwards in the document tree is not stopped before (Event::stopPropagation()), the “click” event listeners of ancestor elements, if any, are triggered first in tree order, and then in listener registration order. -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not cc me. / Bitte keine Kopien per E-Mail.