Wednesday, September 30, 2015

JavaScript: Comparing (New) "input" and "change" Events to Capture Real Time [Range Input] State Changes

First
Let's see the stacking and markup of the HTML elements:

As you can see, the <input type="range"> has some essential attributes:

  • type, to define the type of the input element.
  • min, to define the allowed minimum value.
  • max, to define the allowed maximum value.
  • step, to define the step-distance of each increment/decrement.
  • value, to define the initial value.
  • Others:
    1. id is for JavaScript purpose.
    2. style attribute is because somebody's being lazy... an inline styling (CSS) attribute.
    3. disabled attribute is for disabling the element.

It is wrapped within a paragraph tag, so it will have nice (default) empty vertical spaces and be displayed as a block element.

Second
Let's then create the option for comparing the event listener methods: input and change.

The method of stacking the select-option elements (plus the listener/controller) can be read on this other post.

Third
We'll create the output elements.

The last
The JavaScript listener/controller:

The above example is an anonymous auto-invoked function.

SYNOPSIS about the main logic

  1. First, the <input type="range"> is disabled.
  2. After we choose either option, it will then be enabled.
  3. Then we can observe the different behavior of each event listener method by dragging or clicking the <input type="range">.

About the JavaScript

There are comments on it so you can see the flow.
Feel free to comment below.

The removeEventListener is useful so that we don't attach more than one different listeners to one element (for this particular example).
Anywho, even though there's no event listener attached to it, declaring the removeEventListener to an element won't produce error.
One more, removeEventListener works for registered addEventListener, not on listener attachment.


DEMO

Choose the type of event capture


All demo codes combined:


In Conclusion

The new input event is great for "real time" capture.

These element and event are HTML5 features, so olden browsers don't support them.


Links

  • input event on MDN
  • input event on MSDN
  • <input type="range"> support table on CanIUse

No comments:

Post a Comment

Tell me what you think...