Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38451

Re: Multiple inputs with same event

Show key headers only | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Multiple inputs with same event Andrew Poulos <ap_prog@hotmail.com> - 2020-06-07 10:36 +1000
  Re: Multiple inputs with same event Arno Welzel <usenet@arnowelzel.de> - 2020-06-07 11:06 +0200
    Re: Multiple inputs with same event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-06-07 13:09 +0200
      Re: Multiple inputs with same event Luuk <luuk@invalid.lan> - 2020-06-07 15:40 +0200
        Re: Multiple inputs with same event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-06-08 00:37 +0200
          Re: Multiple inputs with same event Julio Di Egidio <julio@diegidio.name> - 2020-06-08 07:44 -0700
  Re: Multiple inputs with same event James Kirk <noneya.invalid@gmail.com> - 2020-06-07 10:30 -0400
  Re: Multiple inputs with same event JJ <jj4public@vfemail.net> - 2020-06-07 23:49 +0700
  Re: Multiple inputs with same event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-06-07 12:56 -0700
    Re: Multiple inputs with same event Andrew Poulos <ap_prog@hotmail.com> - 2020-06-08 11:39 +1000
      Re: Multiple inputs with same event Gregor Kofler <usenet@gregorkofler.com> - 2020-06-08 11:33 +0200
    Re: Multiple inputs with same event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-06-09 02:49 +0200
      Re: Multiple inputs with same event Andrew Poulos <ap_prog@hotmail.com> - 2020-06-10 17:19 +1000
        Re: Multiple inputs with same event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-06-10 17:12 +0200
          Re: Multiple inputs with same event Andrew Poulos <ap_prog@hotmail.com> - 2020-06-11 15:43 +1000

csiph-web