javascript compatible with all browsers DOM extension features

Today is Friday, I am very idle, sitting in front of the computer, and the people in the product line have not mentioned any new needs. There may be new needs and work arrangements next week, but that will happen next week. Today I want to write something technical, just take notes. My level is limited. I hope everyone will give me some advice and show mercy, haha.
Sometimes we want to expand the functions of DOM elements, and we can add some custom methods to make it more flexible and convenient to use; let’s give an example:

There is no doubt that from the above code, it can be seen that when clicking the A tag, "Hello" will pop up. tagA is a DOM element. In addition to the onclick event, there are onmouseover, onmouseout, onmousemove, etc., and these events are all owned by the DOM element itself; but now we hope to expand it, for example, to support it, I can use ("click", function(){}), instead of =function(){}. OK, the purpose is very clear now, let’s look at the following code first:

The above code is the final effect after the function is extended. It is the same function as the previous code, but it cannot be executed yet. It must be expanded before you can look at some basic knowledge. This is very important because you will use it later:
1. HTMLElement. In the DOM standard, each element is inherited from HTMLElement, and HTMLElement is inherited from Element, and Element is inherited from Node; so we can use HTMLElement's Prototype to extend the methods and attributes of HTML elements. How to implement it? Let's look at a piece of code:

The above code pops up "This is an extension method" when the page is loaded, but I believe you have noticed that there will be errors in IE6, 7, 8, but it can run normally in IE9 or above or Chrome, Firefox, Opera. This is a compatibility issue. Don't worry, it will be solved later.
The above code is not flexible enough, let's optimize it to make it more flexible:

From the above code, we can see that with the DOMExtend method, we can implement different extensions by passing in unused name and fn.
2. After talking about HTMLElement above, let’s talk about event binding. Many people know that the event binding methods of IE and other browsers are different. The code to achieve event binding compatible with all browsers is as follows:

The following is an example of using event binding:

After running the above code, click "Hello" and "This is event binding" will pop up. What is worth mentioning here is the third parameter of addEvenListener. The value here is false, which means canceling the Capture method and using the bubble method. There are two ways to trigger a standard event, one is the caputre and the other is the bubbling type; while IE only supports bubbling type. The characteristic of the capture type is that the triggering method is to trigger events from the outside to the inside, while the bubble type is to trigger events from the inside to the outside. Suppose that the A element in the above code contains a DIV element. If element A and its parent element DIV have an onclick event, then the bubble type is to trigger the event of A first when clicking A, and then trigger the DIV event, otherwise it is the capture type.
OK, I believe that through the above analysis, I have a considerable understanding of HTMLElement extension and event binding. Combining these two knowledge points, we can write the following code:

Execute the above page, tagA click event can be triggered normally in standard browsers such as IE9, Chrome, Opera, Firefox, etc., so there is only one problem left, which is to be compatible with other browsers. The reason why IE browser errors is because they hide access to HTMLElement, so we cannot use it to extend it for IE browser, but we can achieve the goal by rewriting the following functions:





(PS: It seems that the above methods are used to obtain DOM elements in memory~ I don’t know if there are any other methods)
After rewriting, perform some processing and transformation to get the following complete page code:

OK, the compatibility issue has been solved so far. This is the code for DOM element extensions that all browsers can pass smoothly, but there is still a small problem. Careful people will find that the result popping up in the IE browser is "undefined", not "hello". The reason for the problem lies in the event binding of IE. Look at the above code. When alert() is called, since the IE binding event uses attachEvent, this points to Windows, so the current target needs to change the object pointed to by this and point this to tagA. So after modification, the complete code is as follows: