Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #38447 > unrolled thread
| Started by | Andrew Poulos <ap_prog@hotmail.com> |
|---|---|
| First post | 2020-06-07 10:36 +1000 |
| Last post | 2020-06-11 15:43 +1000 |
| Articles | 15 — 10 participants |
Back to article view | Back to comp.lang.javascript
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
| From | Andrew Poulos <ap_prog@hotmail.com> |
|---|---|
| Date | 2020-06-07 10:36 +1000 |
| Subject | Multiple 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]
| From | Arno Welzel <usenet@arnowelzel.de> |
|---|---|
| Date | 2020-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]
| From | "Evertjan." <exxjxw.hannivoort@inter.nl.net> |
|---|---|
| Date | 2020-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]
| From | Luuk <luuk@invalid.lan> |
|---|---|
| Date | 2020-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]
| From | "Evertjan." <exxjxw.hannivoort@inter.nl.net> |
|---|---|
| Date | 2020-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]
| From | Julio Di Egidio <julio@diegidio.name> |
|---|---|
| Date | 2020-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]
| From | James Kirk <noneya.invalid@gmail.com> |
|---|---|
| Date | 2020-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]
| From | JJ <jj4public@vfemail.net> |
|---|---|
| Date | 2020-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]
| From | "Michael Haufe (TNO)" <tno@thenewobjective.com> |
|---|---|
| Date | 2020-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]
| From | Andrew Poulos <ap_prog@hotmail.com> |
|---|---|
| Date | 2020-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]
| From | Gregor Kofler <usenet@gregorkofler.com> |
|---|---|
| Date | 2020-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]
| From | Thomas 'PointedEars' Lahn <PointedEars@web.de> |
|---|---|
| Date | 2020-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]
| From | Andrew Poulos <ap_prog@hotmail.com> |
|---|---|
| Date | 2020-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]
| From | Thomas 'PointedEars' Lahn <PointedEars@web.de> |
|---|---|
| Date | 2020-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]
| From | Andrew Poulos <ap_prog@hotmail.com> |
|---|---|
| Date | 2020-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