/    Sign up×
Community /Pin to ProfileBookmark

addEventListener and removeEventListener question

I know how to use the ‘addEventListener()’ and ‘removeEventListener()’ functions to an element.

[code]
elem.addEventListener(‘click’, externalFunction, false);
[code]

How can I test if the function has already been activated before? :confused:
For example, if I add an event listener function, what test is used to determine
if it is already in effect without calling the function again and create a duplicate
element event?

I am not asking how to disable an element, but how to toggle the eventlistener
function on/off based upon a logic test. The following does not seem to work:
[code]
if (!elem.addEventListener) {
elem.addEventListener(‘click’,externalFunction, false);
}

… later in program …

if (elem.removeEventListener) {
elem.removeEventListener(‘click’,externalFunction, false);
}
[/code]

Do I need to somehow change the externalFunction to be ‘null’
when I don’t want the event to occur
and set it back to the function when needed? For example:

[code]
function externalFunction() { …. some action … }

… later in program …

externalFunction = null; // to de-activate event
… or …
externalFunction = ???; // to re-activate event if it had been de-activated
[/code]

I don’t know if the above code is even feasible. ?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 12.2017 — Apparently it is not possible to check whether an event listener is attached or not:

http://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not

I recommend using an explicit status flag (data-attribute at the same element) indicating if an event listener is attached or not.
Copy linkTweet thisAlerts:
@JMRKERauthorJan 13.2017 — Thanks. I'll give that a shot.
Copy linkTweet thisAlerts:
@rootJan 13.2017 — The support for getEventListeners() has been dropped from all major browsers, Chrome is supposed to allow some sort of test via the command line, but details are sketchy.
Copy linkTweet thisAlerts:
@JMRKERauthorJan 13.2017 — Apparently it is not possible to check whether an event listener is attached or not:

http://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not

I recommend using an explicit status flag (data-attribute at the same element) indicating if an event listener is attached or not.[/QUOTE]


I have not yet tried it with a data-attribute solution,

but the following at least does what I was initially trying to ask about.

It simply controls the scroll event of the DIV and SELECT elements

using the appropriate CHECKBOX status. No real use, just playing around. ?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; Scroll Control &lt;/title&gt;
&lt;style type="text/css"&gt;
#Select1 { height:100px; width: 200px; overflow: auto; float: left; border: 1px solid blue; margin: 2px; }
#Select2 { height:100px; width: 200px; overflow: auto; float: left; border: 1px solid blue; margin: 2px; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt; Scroll Control &lt;/h2&gt;
Both false = no control | Both true = dual control &lt;br&gt;
&lt;input type="checkbox" id="cb1"&gt; Control 2 by 1
&lt;input type="checkbox" id="cb2"&gt; Control 1 by 2&lt;br&gt;

&lt;div class="clearfix"&gt;
&lt;div id="Select1"&gt;
&lt;ul&gt;
&lt;li&gt; List &lt;/option&gt;
&lt;li&gt; 1 &lt;/li&gt;
&lt;li&gt; 2 &lt;/li&gt;
&lt;li&gt; 3 &lt;/li&gt;
&lt;li&gt; 4 &lt;/li&gt;
&lt;li&gt; 5 &lt;/li&gt;
&lt;li&gt; 6 &lt;/li&gt;
&lt;li&gt; 7 &lt;/li&gt;
&lt;li&gt; 8 &lt;/li&gt;
&lt;li&gt; 9 &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div id="Select2"&gt;
&lt;ul&gt;
&lt;li&gt; List&lt;/option&gt;
&lt;li&gt; a &lt;/li&gt;
&lt;li&gt; b &lt;/li&gt;
&lt;li&gt; c&lt;/li&gt;
&lt;li&gt; d &lt;/li&gt;
&lt;li&gt; e &lt;/li&gt;
&lt;li&gt; f &lt;/li&gt;
&lt;li&gt; g &lt;/li&gt;
&lt;li&gt; h &lt;/li&gt;
&lt;li&gt; i &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;div class="clearfix"&gt;
&lt;select id="SBox1" size="3"&gt;
&lt;option&gt; Select &lt;/option&gt;
&lt;option&gt; 9 &lt;/option&gt;
&lt;option&gt; 8 &lt;/option&gt;
&lt;option&gt; 7 &lt;/option&gt;
&lt;option&gt; 6 &lt;/option&gt;
&lt;option&gt; 5 &lt;/option&gt;
&lt;option&gt; 4 &lt;/option&gt;
&lt;option&gt; 3 &lt;/option&gt;
&lt;option&gt; 2 &lt;/option&gt;
&lt;option&gt; 1 &lt;/option&gt;
&lt;/select&gt;

&lt;select id="SBox2" size="3"&gt;
&lt;option&gt; Select &lt;/option&gt;
&lt;option&gt; A &lt;/option&gt;
&lt;option&gt; B &lt;/option&gt;
&lt;option&gt; C &lt;/option&gt;
&lt;option&gt; D &lt;/option&gt;
&lt;option&gt; E &lt;/option&gt;
&lt;option&gt; F &lt;/option&gt;
&lt;option&gt; G &lt;/option&gt;
&lt;option&gt; H &lt;/option&gt;
&lt;option&gt; I &lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;script&gt;

function select_div_scroll_1(e) { // top/left scroll controls bottom/right
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
if (document.getElementById('cb1').checked) { s2.scrollTop = s1.scrollTop; }
else { s1.scrollTop = s1.scrollTop; }
}
function select_div_scroll_2(e) { // bottom/right scroll controls top/left
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');
if (document.getElementById('cb2').checked) { s1.scrollTop = s2.scrollTop; }
else { s2.scrollTop = s2.scrollTop; }
}

function select_sBox_scroll_1(e) { // top/left scroll controls bottom/right
var s1 = document.getElementById('SBox1');
var s2 = document.getElementById('SBox2');
if (document.getElementById('cb1').checked) { s2.scrollTop = s1.scrollTop; }
else { s1.scrollTop = s1.scrollTop; }
}
function select_sBox_scroll_2(e) { // bottom/right scroll controls top/left
var s1 = document.getElementById('SBox1');
var s2 = document.getElementById('SBox2');
if (document.getElementById('cb2').checked) { s1.scrollTop = s2.scrollTop; }
else { s2.scrollTop = s2.scrollTop; }
}

function init() {
/* For DIV simultaneous scroll */
var s1 = document.getElementById('Select1');
var s2 = document.getElementById('Select2');

s1.addEventListener('scroll', select_div_scroll_1, false);
s2.addEventListener('scroll', select_div_scroll_2, false);
// use BOTH above to have simultaneous control


/* For SELECT simultaneous scroll */
s1 = document.getElementById('SBox1');
s2 = document.getElementById('SBox2');

s1.addEventListener('scroll', select_sBox_scroll_1, false);
s2.addEventListener('scroll', select_sBox_scroll_2, false);
// use BOTH above to have simultaneous control

} init();

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...