A brief discussion on js change, propertychange, input events_javascript skills

https://github.com/mootools/mootools-core/issues/2170

This issue comes from the implementation of checkbox and radio change events in IE (LTE8). Tested in LTE8), when you click on a checkbox or radio, its change event will not be triggered immediately unless you make it lose focus. However, in other standard browsers (including IE9), the change event is triggered immediately after clicking. Yes, this is indeed a painful problem. When it comes to the solution, it is relatively easy. Use the element-specific propertychange event in IE (LTE8) to handle it (IE9 no longer has this thing), you can avoid the above problems, such as :

Copy code The code is as follows:

checkEl.attachEvent('onpropertychange', function() {
console.log('hey man, I am changed');
});

But it is not sufficient to think that it is solved, because like Operations such as checkEl.setAttribute('data-value', 'god') will also trigger its propertychange event, so we need to use its event.propertyName to judge, such as:

Copy code The code is as follows:

checkEl.attachEvent('onpropertychange', function() {
if(window.event. propertyName == 'checked')
console.log('blah blah blah...');
});

This is OK. From this, I tested the select again, and the performance of its change event was consistent in different browsers, and there was no need to lose focus first. I tested input[type="text"] again. Its change event is familiar to us. It will only be triggered when it loses focus. So when we want it to trigger immediately as soon as something is entered, refer to the previous example. In IE (LTE8), we can use propertychange to achieve this, but the condition of propertyName becomes 'value'. In other standard browsers (including IE9), we can use a standard event input in HTML5, such as:

Copy code The code is as follows:

inputEl.addEventListener('input', function(event) {
console.log('input event fired');
}, false);

In this way, every input we make will trigger this event. Some people may ask why not use keyup to monitor it. Here is an article (original link) that explains this issue. If you are interested, you can Read.