A brief analysis of html input equivalent value changes and adding listening events

The effect to be achieved

In many cases, we will monitor the changes in the input box value in real time in order to take immediate actions to guide the viewer to enhance the user experience of the website. For example, it can instantly display the number of bytes that have been entered into the input box, or instantly read the entered value for search guidance, which is Google's related search effect, etc.
A lot can be done as long as we can capture instant events.
Knowledge you need to know
First of all, we need to understand the difference between onchange and onpropertychange:

Under IE, when a When the attributes of HTML elements change, they can be captured immediately through onpropertychange.
onchange When the attribute value changes, the current element must lose focus (onblur) before the event can be activated.

After understanding this, we found that the effect of onpropertychange is what we want, but unfortunately, it only works under IE. Can we find another time to replace onpropertychange?

After reading the information, I learned that oninput events can be used to achieve the same effect in other browsers. This is great. We only need to browse IE Just tell them apart.

Usage of oninput

Let’s first understand how to use oninput.
If you write the registration time directly on the page, then the following writing method can be achieved:
2a8e7ed8f07c3a38968cd332150a40a7

However, when oninput is written and separated in JS code, it is somewhat different from the ordinary event registration method. You must use addEventListener to register.

The difference between attachEvent and addEventListener

Having said that, let’s take a look at how to use attachEvent and addEventListener:

attachEvent method, for a certain event Attach other processing events. (Mozilla series is not supported)
addEventListener method is used for Mozilla series

Example:

document.getElementByIdx_x_x("btn").onclick = method1;   
  
document.getElementByIdx_x_x("btn").onclick = method2;   
  
document.getElementByIdx_x_x("btn").onclick = method3;

If this is the case If It is a Mozilla series and does not support this method. You need to use addEventListener

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

After understanding how to use addEventListener to register oninput events, we Let’s go back to the problem to be solved [dividing browsers].

Judge IE browser

How to distinguish IE?

This seems to be a commonplace question. There are many ways to find that on the Internet, which are classified into two categories:

One is to determine the functional attributes of the browser. The second is to judge the traditional user-agent string, which may be the oldest and most popular detection method. I won’t go into in-depth understanding here. We use a relatively simple method to judge

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.addEventListener("click",method1,false);   
  
btn1Obj.addEventListener("click",method2,false);   
  
btn1Obj.addEventListener("click",method3,false);   
  
执行顺序为method1->method2->method3

The problems we have encountered so far have been solved Now, let’s start writing code to test whether our idea can be realized.

The above-mentioned brief analysis of html input equivalent changes and adding listening events is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles on simple analysis of html input equivalent changes and adding monitoring events, please pay attention to the PHP Chinese website!