Path: csiph.com!eternal-september.org!feeder.eternal-september.org!reader01.eternal-september.org!james.kirk.invalid!.POSTED!not-for-mail
From: James Kirk <noneya.invalid@gmail.com>
Newsgroups: comp.lang.javascript
Subject: Re: Multiple inputs with same event
Date: Sun, 7 Jun 2020 10:30:50 -0400
Organization: Time Travel Tracing
Lines: 76
Message-ID: <20200607103050.5136ea8a@james.kirk.invalid>
References: <9KednS9A0scWq0HDnZ2dnUU7-TnNnZ2d@westnet.com.au>
Reply-To: ": James Kirk" <noneya.invalid+knobknocker@gmail.com>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Injection-Info: james.kirk.invalid; posting-host="39e6f8688208019da7f6816e05260794"; logging-data="25035"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1/7mxsJWwvzcN6R2bUSMEkfME5tiQthJyY="
User-Agent: Unicorn named Ellie
Cancel-Lock: sha1:4qwJwXT4909gp9GAX7SGpZBOsco=
X-Rot13: This message MAY contains rot13 encoded text that sensitive people may find offense,  decode at your own peril.
X-Newsreader: Microsoft Windows Dead Mail Original Imitation Prototype
Content-Language: en-US
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QIHFgQpyK6L9AAAAEJQTFRFAAAAQAAAQEAAQEBAQECAgEBAgECAgIBAgICAgIC/gL+/v4BAv4CAv4C/v7+Av7+/v7//v////7+A/7+///+/////CTpitwAAAAF0Uk5TAEDm2GYAAAABYktHRBXl2PmjAAAB6klEQVRIx61Vi3KEIAz0pJZYUwIi//+r3QT78sTKTDM3N6e3y+5iIsPwT+UcdeHJOSd9Ao6kVyB2CqQkfQKpSI+AS6lDQh2VDoIzR6jYQVCBuymo7tH9EF+OUrwnAfxLFSjp/aajuZTbnujbUYop/dWz7P1kDyFWS4lYLuETyrs5VUKMSTyHthvFe/ZwFD8tRQ68SNvOxFlGh8hFl48oCoF9aOC9l23jB6n5GMHBR1gZfI7nvG2bf0hUL2YLNCWwf3Ilnip+Q2cX86+G8FM9MU/PgcmHDIaMZG6wflGKegLhyZQn4oxCBKlxTaHGBmHxz45ECRkRFFpX1+9UCQdPzHikRtBRiD8rzacEQjbFh5HKjixSzJco/kgQomyM5THvAoKFxXaLzgj40wj2FNSI2NW7pdbM/ritlbBOLu3rm0EnshOO3cHIAEZAIwG949ewvOqFX467ahIIsfJIltN2bF1XngQa/qxhWQkBEUTXzJWAGzCFKeKzaVDGpJllNwR84IlEiM/nIWRG54ERKrwSIDE3Jg57O7ooiVetYIX5o9gca2KcOzAUdnRtbEhcvMKAp/CrriTsoCKM2JenPAwzbr5dKWgYxUr+PoEvCCfq1DyBIf4iPYc8NQ5naUlQeynqJLRf9Z2E4cb58QHWYi4v2VmiigAAAABJRU5ErkJggg==
X-Operating-System: Windows 3.0
Xref: csiph.com comp.lang.javascript:38451

In Message: <9KednS9A0scWq0HDnZ2dnUU7-TnNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

> I have a page with lots of input elements on it. The state of the
> inputs determines the content of a "preview pane". Rather than have
> the pane update continually as a, say, number field is incremented
> it waits for a blur event to trigger.

> A function then reads the state of the inputs and updates the pane 
> accordingly.

> Attaching a blur event to every input that calls the same update 
> function seems very inefficient. Actually, for some inputs like 
> checkboxes just selecting them should call the update function.

> Is there a way for multiple inputs to call the same function when
> the same event occurs to any of them without directly attaching the
> event to each input? 

For events that bubble. Yes

> Or should a just write a function that dynamically attaches the
> required events?

For events that do not bubble. Yes


change event bubbles
====================


<input type="checkbox" id="can1">
<label for="can1">can 1</label>
<br>
<input type="checkbox" id="can2">
<label for="can2">can 2</label>
<br>
<input type="checkbox" id="can3">
<label for="can3">can 3</label>
<br>
<input type="radio" id="dan1" name="mabel">
<label for="dan1">dan 1</label>
<br>
<input type="radio" id="dan2" name="mabel">
<label for="dan2">dan 2</label>
<br>
<input type="radio" id="dan3" name="mabel">
<label for="dan3">dan 3</label>
<div id="stay"></div>

(() => {
 'use strict';
 document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('change', (e) => {
   let {
    target: elm
   } = e, {
    id: elmId,
    nodeName: elmNodeName,
    type: elmType,
    name: elmName,
    checked: isChecked
   } = elm,
   stay = document.getElementById('stay');
   if (!elmNodeName.match(/input/i) && !elmType.match(/checkbox|radio/i)) {
    return;
   }
   stay.textContent = elmId + ' ' + elmName + ' isChecked:' + isChecked;
  });
 });
})();

-- 
James Kirk