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


Groups > comp.lang.javascript > #38447 > unrolled thread

Multiple inputs with same event

Started byAndrew Poulos <ap_prog@hotmail.com>
First post2020-06-07 10:36 +1000
Last post2020-06-11 15:43 +1000
Articles 15 — 10 participants

Back to article view | Back to comp.lang.javascript


Contents

  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

#38447 — Multiple inputs with same event

FromAndrew Poulos <ap_prog@hotmail.com>
Date2020-06-07 10:36 +1000
SubjectMultiple inputs with same event
Message-ID<9KednS9A0scWq0HDnZ2dnUU7-TnNnZ2d@westnet.com.au>
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? Or should a just write a function that dynamically attaches 
the required events?

Andrew Poulos

[toc] | [next] | [standalone]


#38448

FromArno Welzel <usenet@arnowelzel.de>
Date2020-06-07 11:06 +0200
Message-ID<hk3p01Fo3trU1@mid.individual.net>
In reply to#38447
Andrew Poulos:

[...]
> 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? Or should a just write a function that dynamically attaches 
> the required events?

Without attaching the event to a handler there is handler at all.

If you need different handlers for different input element types,
iterate through the DOM and attach the handler depending on the type.
one for blur events and another for checking or unchecking things.

But however you do it - there is no other way than attaching an event
handler to each input element. There is no gobal "some input has some
change" event.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]


#38449

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-06-07 13:09 +0200
Message-ID<XnsABD585D5CA71Deejj99@194.109.6.166>
In reply to#38448
Arno Welzel <usenet@arnowelzel.de> wrote on 07 Jun 2020 in 
comp.lang.javascript:

> Andrew Poulos:
> 
> [...]
>> 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? Or should a just write a function that dynamically attaches 
>> the required events?
> 
> Without attaching the event to a handler there is handler at all.
> 
> If you need different handlers for different input element types,
> iterate through the DOM and attach the handler depending on the type.
> one for blur events and another for checking or unchecking things.

Well no, the handler could test the sort/type of input on execution.

<input class='sort123' onblur='doIt(this)' ..
<input class='sort456' onblur='doIt(this)' ..

const doIt = (t) => {
    	if (t.className == 'sort123') alert(t.value.toUpperCase());
    	if (t.className == 'sort456') alert('456');
    	// ..... or do nothing
};

> But however you do it - there is no other way than attaching an event
> handler to each input element. There is no gobal "some input has some
> change" event.

Quite.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]


#38450

FromLuuk <luuk@invalid.lan>
Date2020-06-07 15:40 +0200
Message-ID<5edcee62$0$13649$e4fe514c@newszilla.xs4all.nl>
In reply to#38449
On 7-6-2020 13:09, Evertjan. wrote:
> Arno Welzel <usenet@arnowelzel.de> wrote on 07 Jun 2020 in
> comp.lang.javascript:
> 
>> Andrew Poulos:
>>
>> [...]
>>> 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? Or should a just write a function that dynamically attaches
>>> the required events?
>>
>> Without attaching the event to a handler there is handler at all.
>>
>> If you need different handlers for different input element types,
>> iterate through the DOM and attach the handler depending on the type.
>> one for blur events and another for checking or unchecking things.
> 
> Well no, the handler could test the sort/type of input on execution.
> 
> <input class='sort123' onblur='doIt(this)' ..
> <input class='sort456' onblur='doIt(this)' ..
> 
> const doIt = (t) => {
>      	if (t.className == 'sort123') alert(t.value.toUpperCase());
>      	if (t.className == 'sort456') alert('456');
>      	// ..... or do nothing
> };
> 
>> But however you do it - there is no other way than attaching an event
>> handler to each input element. There is no gobal "some input has some
>> change" event.
> 
> Quite.
> 

or:

<input class='sort123' onblur='doIt(123, this)' ..
<input class='sort456' onblur='doIt(456, this)' ..

const doIt = (i, t) => {
     	if (i == 123) alert(t.value.toUpperCase());
     	if (i == 456) alert('456');
     	// ..... or do nothing
};

-- 
Luuk

[toc] | [prev] | [next] | [standalone]


#38454

From"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date2020-06-08 00:37 +0200
Message-ID<XnsABD664EF49CEeejj99@194.109.6.166>
In reply to#38450
Luuk <luuk@invalid.lan> wrote on 07 Jun 2020 in comp.lang.javascript:

> On 7-6-2020 13:09, Evertjan. wrote:
>> Arno Welzel <usenet@arnowelzel.de> wrote on 07 Jun 2020 in
>> comp.lang.javascript:
>> 
>>> Andrew Poulos:
>>>
>>> [...]
>>>> 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? Or should a just write a function that dynamically attaches
>>>> the required events?
>>>
>>> Without attaching the event to a handler there is handler at all.
>>>
>>> If you need different handlers for different input element types,
>>> iterate through the DOM and attach the handler depending on the type.
>>> one for blur events and another for checking or unchecking things.
>> 
>> Well no, the handler could test the sort/type of input on execution.
>> 
>> <input class='sort123' onblur='doIt(this)' ..
>> <input class='sort456' onblur='doIt(this)' ..
>> 
>> const doIt = (t) => {
>>           if (t.className == 'sort123') alert(t.value.toUpperCase());
>>           if (t.className == 'sort456') alert('456');
>>           // ..... or do nothing
>> };
>> 
>>> But however you do it - there is no other way than attaching an event
>>> handler to each input element. There is no gobal "some input has some
>>> change" event.
>> 
>> Quite.
>> 
> 
> or:
> 
> <input class='sort123' onblur='doIt(123, this)' ..
> <input class='sort456' onblur='doIt(456, this)' ..
> 
> const doIt = (i, t) => {
>           if (i == 123) alert(t.value.toUpperCase());
>           if (i == 456) alert('456');
>           // ..... or do nothing
>};

Well, but than you cannot exchange it with:

====================
<input><br>
<input class='sort123'><br>
<input class='sort456'><br>
<input><br>

<script>
document.querySelectorAll('input').forEach(
  function(someInput) {
    someInput.addEventListener('blur', 
      function() {
        if (this.className == 'sort123') alert(this.value.toUpperCase());
        if (this.className == 'sort456') alert('456');
        // do nothing for the first and the last<input>
      }
    )
  }
);
</script>
====================

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]


#38457

FromJulio Di Egidio <julio@diegidio.name>
Date2020-06-08 07:44 -0700
Message-ID<37c245b1-2f05-4fcf-b483-fdc3abba1f2bo@googlegroups.com>
In reply to#38454
On Monday, 8 June 2020 00:37:19 UTC+2, Evertjan.  wrote:

> <input><br>
> <input class='sort123'><br>
> <input class='sort456'><br>
> <input><br>
> 
> <script>
> document.querySelectorAll('input').forEach(
>   function(someInput) {
>     someInput.addEventListener('blur', 
>       function() {
>         if (this.className == 'sort123') alert(this.value.toUpperCase());
>         if (this.className == 'sort456') alert('456');
>         // do nothing for the first and the last<input>
>       }
>     )
>   }
> );
> </script>
> ====================

I'll add my 2c to this thread, actually 3:

1) If you do that, then it is a matter of little modification to that code
to actually attach the needed handlers at say dom-ready time, once and for
all and only to the needed inputs.

2) if else if....

3) ===

Julio

[toc] | [prev] | [next] | [standalone]


#38451

FromJames Kirk <noneya.invalid@gmail.com>
Date2020-06-07 10:30 -0400
Message-ID<20200607103050.5136ea8a@james.kirk.invalid>
In reply to#38447
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

[toc] | [prev] | [next] | [standalone]


#38452

FromJJ <jj4public@vfemail.net>
Date2020-06-07 23:49 +0700
Message-ID<6dkfaxvk7q04.1exfyjq8z4wqd.dlg@40tude.net>
In reply to#38447
On Sun, 7 Jun 2020 10:36:25 +1000, Andrew Poulos wrote:
> 
> 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? Or should a just write a function that dynamically attaches 
> the required events?
> 
> Andrew Poulos

For that, you can use event delegation. e.g.

  function blurHandler(ev) {
    console.log(this.value);
  }

  addEventListener("blur", ev => {
    let blurredElement = ev.target;
    console.log("blur", blurredElement);
    blurHandler.apply(blurredElement, arguments);
  }, true); //must capture

[toc] | [prev] | [next] | [standalone]


#38453

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2020-06-07 12:56 -0700
Message-ID<ef363a56-281b-49ab-9e32-e244a27411d1o@googlegroups.com>
In reply to#38447
On Saturday, June 6, 2020 at 7:36:36 PM UTC-5, Andrew Poulos 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? Or should a just write a function that dynamically attaches 
> the required events?

If you wrap all of your elements in a <form> tag you can attach an eventListener to that form and capture any "change" event:

```html
<form id="myForm">
  <input name="a">
  <input name="b">
  <input name="c">
</form>
```

```js
let myForm = document.getElementById('myForm')

myForm.addEventListener('change', (e) => {
  console.log(e)
})
```

[toc] | [prev] | [next] | [standalone]


#38455

FromAndrew Poulos <ap_prog@hotmail.com>
Date2020-06-08 11:39 +1000
Message-ID<ktmdnfPJecVBC0DDnZ2dnUU7-efNnZ2d@westnet.com.au>
In reply to#38453
On 8/06/2020 5:56 am, Michael Haufe (TNO) wrote:
> On Saturday, June 6, 2020 at 7:36:36 PM UTC-5, Andrew Poulos 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? Or should a just write a function that
>> dynamically attaches the required events?
> 
> If you wrap all of your elements in a <form> tag you can attach an
> eventListener to that form and capture any "change" event:
> 
> ```html <form id="myForm"> <input name="a"> <input name="b"> <input
> name="c"> </form> ```
> 
> ```js let myForm = document.getElementById('myForm')
> 
> myForm.addEventListener('change', (e) => { console.log(e) }) ```

Doing this and then parsing e.target gives me the type, id and other
attributes. I'll try it this way.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]


#38456

FromGregor Kofler <usenet@gregorkofler.com>
Date2020-06-08 11:33 +0200
Message-ID<rbl0kd$ktp$1@dont-email.me>
In reply to#38455
Am 08.06.20 um 03:39 schrieb Andrew Poulos:
> On 8/06/2020 5:56 am, Michael Haufe (TNO) wrote:
>> On Saturday, June 6, 2020 at 7:36:36 PM UTC-5, Andrew Poulos 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? Or should a just write a function that
>>> dynamically attaches the required events?
>>
>> If you wrap all of your elements in a <form> tag you can attach an
>> eventListener to that form and capture any "change" event:
>>
>> ```html <form id="myForm"> <input name="a"> <input name="b"> <input
>> name="c"> </form> ```
>>
>> ```js let myForm = document.getElementById('myForm')
>>
>> myForm.addEventListener('change', (e) => { console.log(e) }) ```
> 
> Doing this and then parsing e.target gives me the type, id and other
> attributes. I'll try it this way.
> 
> Andrew Poulos

Be aware, that the blur event doesn't bubble:

https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

[toc] | [prev] | [next] | [standalone]


#38458

FromThomas 'PointedEars' Lahn <PointedEars@web.de>
Date2020-06-09 02:49 +0200
Message-ID<1772720.tdWV9SEqCh@PointedEars.de>
In reply to#38453
Michael Haufe (TNO) wrote:

> On Saturday, June 6, 2020 at 7:36:36 PM UTC-5, Andrew Poulos wrote:
>> 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? Or should a just write a function that dynamically attaches
>> the required events?
> 
> If you wrap all of your elements in a <form> tag

_“form” element_

Elements are NOT tags.

<https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started>

<https://www.w3.org/TR/html52/introduction.html#a-quick-introduction-to-html>

> you can attach an
> eventListener to that form and capture any "change" event:
> 
> ```html
> <form id="myForm">
>   <input name="a">
>   <input name="b">
>   <input name="c">
> </form>
> ```
> 
> ```js
> let myForm = document.getElementById('myForm')
> 
> myForm.addEventListener('change', (e) => {
>   console.log(e)
> })
> ```

This code should only be executed once it has been ascertained that the 
relevant parts of the document have been parsed to produce a document tree.

It is actually not necessary (but recommended by some people) do this with 
assignment with scripting.  However, a form element can have an “onchange” 
event-handler attribute that can execute code, like a function:

  <form … onchange='my.change(this, event)'>
    …
  </form>

Then the form element does not need an “id” attribute, and the reference to 
object representing the current propagated event and to the object 
representing the form element, can be obtained by passing the “event” and 
“this” values respectively.

Note that the “change” event might not be fired for every control.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]


#38460

FromAndrew Poulos <ap_prog@hotmail.com>
Date2020-06-10 17:19 +1000
Message-ID<Cp6dnZKdScEUFH3DnZ2dnUU7-cnNnZ2d@westnet.com.au>
In reply to#38458
On 9/06/2020 10:49 am, Thomas 'PointedEars' Lahn wrote:
> Michael Haufe (TNO) wrote:
> 
>> On Saturday, June 6, 2020 at 7:36:36 PM UTC-5, Andrew Poulos wrote:
>>> 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? Or should a just write a function that dynamically attaches
>>> the required events?
>>
>> If you wrap all of your elements in a <form> tag
> 
> _“form” element_
> 
> Elements are NOT tags.
> 
> <https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started>
> 
> <https://www.w3.org/TR/html52/introduction.html#a-quick-introduction-to-html>
> 
>> you can attach an
>> eventListener to that form and capture any "change" event:
>>
>> ```html
>> <form id="myForm">
>>    <input name="a">
>>    <input name="b">
>>    <input name="c">
>> </form>
>> ```
>>
>> ```js
>> let myForm = document.getElementById('myForm')
>>
>> myForm.addEventListener('change', (e) => {
>>    console.log(e)
>> })
>> ```
> 
> This code should only be executed once it has been ascertained that the
> relevant parts of the document have been parsed to produce a document tree.
> 
> It is actually not necessary (but recommended by some people) do this with
> assignment with scripting.  However, a form element can have an “onchange”
> event-handler attribute that can execute code, like a function:
> 
>    <form … onchange='my.change(this, event)'>
>      …
>    </form>
> 
> Then the form element does not need an “id” attribute, and the reference to
> object representing the current propagated event and to the object
> representing the form element, can be obtained by passing the “event” and
> “this” values respectively.
> 
> Note that the “change” event might not be fired for every control.

For the few times that an input is changed with code, and so doesn't 
trigger an "on change" event, I'm going to trigger the change with

document.querySelector('form').dispatchEvent(new Event('change'));

Is it appropriate as the value of "this" won't change?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]


#38461

FromThomas 'PointedEars' Lahn <PointedEars@web.de>
Date2020-06-10 17:12 +0200
Message-ID<2746586.e9J7NaK4W3@PointedEars.de>
In reply to#38460
Andrew Poulos wrote:

> On 9/06/2020 10:49 am, Thomas 'PointedEars' Lahn wrote:
>> It is actually not necessary (but recommended by some people) do this
>> with assignment with scripting.  However, a form element can have an
>> “onchange” event-handler attribute that can execute code, like a
>> function:
>> 
>>    <form … onchange='my.change(this, event)'>
>>      …
>>    </form>
>> 
>> Then the form element does not need an “id” attribute, and the reference
>> to object representing the current propagated event and to the object
>> representing the form element, can be obtained by passing the “event” and
>> “this” values respectively.
>> 
>> Note that the “change” event might not be fired for every control.
> 
> For the few times that an input is changed with code, and so doesn't
> trigger an "on change" event, I'm going to trigger the change with
> 
> document.querySelector('form').dispatchEvent(new Event('change'));

  document.forms[0].dispatchEvent(new Event('change'));
  ^^^^^^^^^^^^^^^^^
suffices as for the first reference, and is more efficient and compatible. 

Your “change” event might need an event target to be useful; then just 
passing the constructor return value might not be sufficient.

Note that for compatibility you may need an “Event” wrapper, like the 
following quickhack:
 
  var _isHostMethod = jsx.object.isHostMethod; // [1]
  var e = null;

  if (typeof Event == 'function')
  {
    try
    {
      e = new Event('change');
    }
    catch (e)
    {
      if (!(e instanceof TypeError)) throw e;
    }
  } 

  if ((!e || e.type != 'change') && _isHostMethod(document, 'createEvent'))
  {
    try
    {
      e = document.createEvent('Event');
      if (_isHostMethod(e, 'initEvent')) e.initEvent('change', true, true);
    }
    catch (e)
    {
      if (_isHostMethod(_global, 'console', 'log')) console.log(e);
    }
  }

<https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events>

[1] <https://github.com/PointedEars/JSX/blob/master/object.js#L1051>

(Maybe I find the time to write a general wrapper during the summer 
holidays, and update JSX.)
 
> Is it appropriate as the value of "this" won't change?

In theory, yes.  It depends on what you want to do.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]


#38462

FromAndrew Poulos <ap_prog@hotmail.com>
Date2020-06-11 15:43 +1000
Message-ID<SdSdnbAYn9_yWXzDnZ2dnUU7-SPNnZ2d@westnet.com.au>
In reply to#38461
On 11/06/2020 1:12 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> On 9/06/2020 10:49 am, Thomas 'PointedEars' Lahn wrote:
>>> It is actually not necessary (but recommended by some people) do this
>>> with assignment with scripting.  However, a form element can have an
>>> “onchange” event-handler attribute that can execute code, like a
>>> function:
>>>
>>>     <form … onchange='my.change(this, event)'>
>>>       …
>>>     </form>
>>>
>>> Then the form element does not need an “id” attribute, and the reference
>>> to object representing the current propagated event and to the object
>>> representing the form element, can be obtained by passing the “event” and
>>> “this” values respectively.
>>>
>>> Note that the “change” event might not be fired for every control.
>>
>> For the few times that an input is changed with code, and so doesn't
>> trigger an "on change" event, I'm going to trigger the change with
>>
>> document.querySelector('form').dispatchEvent(new Event('change'));
> 
>    document.forms[0].dispatchEvent(new Event('change'));
>    ^^^^^^^^^^^^^^^^^
> suffices as for the first reference, and is more efficient and compatible.
> 
> Your “change” event might need an event target to be useful; then just
> passing the constructor return value might not be sufficient.

Oh, good point. I'll dispatch the event on the "correct" input so 
there's an appropriate target set.

> Note that for compatibility you may need an “Event” wrapper, like the
> following quickhack:
>   
>    var _isHostMethod = jsx.object.isHostMethod; // [1]
>    var e = null;
> 
>    if (typeof Event == 'function')
>    {
>      try
>      {
>        e = new Event('change');
>      }
>      catch (e)
>      {
>        if (!(e instanceof TypeError)) throw e;
>      }
>    }
> 
>    if ((!e || e.type != 'change') && _isHostMethod(document, 'createEvent'))
>    {
>      try
>      {
>        e = document.createEvent('Event');
>        if (_isHostMethod(e, 'initEvent')) e.initEvent('change', true, true);
>      }
>      catch (e)
>      {
>        if (_isHostMethod(_global, 'console', 'log')) console.log(e);
>      }
>    }
> 
> <https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events>
> 
> [1] <https://github.com/PointedEars/JSX/blob/master/object.js#L1051>
> 
> (Maybe I find the time to write a general wrapper during the summer
> holidays, and update JSX.)
>   
>> Is it appropriate as the value of "this" won't change?
> 
> In theory, yes.  It depends on what you want to do.

Ok.

Andrew Poulos

[toc] | [prev] | [standalone]


Back to top | Article view | comp.lang.javascript


csiph-web