In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onfilterchange

onfilterchange event | filterchange event

Browser support:

Occurs after a filter has changed or finished a transition.

Visual filters and transitions can be set or retrieved with the filter style property or the filter object.

How to register:

In HTML:

In JavaScript:

object.onfilterchange = handler;

object.attachEvent ("onfilterchange", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	-

Actions that invoke the onfilterchange event:

If the value of the filter style property changes.
If any property of the filter object changes.
If a transition filter finishes.

Example HTML code 1:

This example illustrates the use of the onfilterchange event:

<head>
    <style>
        #mySpan {
            position:absolute;
            left:150px;
            top:50px;
            filter:alpha (opacity=34);
            color:red;
            font-weight:bold;
        }
    </style>
    <script type="text/javascript">
        function ChangeFilter (select) {
            var selectedOption = select.options[select.selectedIndex];
            var span = document.getElementById ("mySpan");
            span.filters["alpha"].Opacity = selectedOption.text;
        }

        function OnFilterChanged (elem) {
            var opac = document.getElementById ("opac");
            opac.innerHTML =  elem.filters["alpha"].Opacity;
        }

    </script>
</head>
<body>
    <span id="mySpan" onfilterchange="OnFilterChanged (this)">Some text with opacity.</span>
    <br /><br />
    Current opacity: <span id="opac"></span>
    <br /><br />
    Change the opacity:
    <select onchange="ChangeFilter (this)">
        <option>0</option>
        <option>20</option>
        <option>40</option>
        <option>60</option>
        <option>80</option>
        <option>100</option>
    </select>
</body>