FireEvent method of IE in JavaScript

In IE, A fireEvent method is provided, which, as its name implies, triggers an event. At the beginning, I thought it would be the same as using onclick () in normal times. I did not expect to find it when I was writing a javascript getting started ppt. I was so self-righteous! It seems that there are still a lot of javascript details not mastered!

Now, we will record the use of the fireEvent method in detail based on our summary. FireEvent is a method provided by IE, msdn documentation address: http://msdn.microsoft.com/en-us/library/ms536423 (v = vs.85). aspx

Onclick ()
Let's first look at the first instance code:

<Ul onclick = 'alert (event. srcElement. innerHTML); '>
<Li id = 'id1'> I am one; </li>
<Li id = 'id2'> I am two; </li>
<Li id = 'id3 '> I am three; </li>
</Ul>
<Button onclick = 'document. getElementById ("id1"). onclick (); '> click me! </Button>

In this Code, we do not have an id1 li add onclick event. When we click the button, an error is returned, indicating that "the object does not support this attribute or method ". It can be seen that DOM. onclick () can be used only after the onclick event is added.

If we modify the above Code:

<Ul onclick = 'alert (event. srcElement. innerHTML); '>
<Li id = 'id1' onclick = 'alert (1); '> I am one; </li>
<Li id = 'id2'> I am two; </li>
<Li id = 'id3 '> I am three; </li>
</Ul>
<Button onclick = 'document. getElementById ("id1"). onclick (); '> click me! </Button>

Click the button to trigger the onclick event, but the ul onclick event is not triggered. This indicates that DOM. onclick () does not have bubbles.

FireEvent ()
Let's see if fireEvent and onclick () trigger events are the same. See the following code:

<Ul onclick = 'alert (event. srcElement. innerHTML); '>
<Li id = 'id1'> I am one; </li>
<Li id = 'id2'> I am two; </li>
<Li id = 'id3 '> I am three; </li>
</Ul>
<Button onclick = 'document. getElementById ("id1"). fireEvent ("onclick") '> fireEvent! </Button>

After clicking the button, the ul onclick event is triggered, indicating that fireEvent will cause bubbling, and the message "the object does not support this attribute or method" is not displayed like onclick ", this indicates that the onclick event can be bubbling even if id1 is not added.
From this we can see that the fireEvent method in IE is similar to simulating users' Mouse clicking behavior, rather than simply onclick.

Summarize the differences between fireEvent and onclick
The preceding example shows that the fireEvent and onclick of DOM have the following differences:

Onclick requires the DOM to actually add The onclick event. Otherwise, the error "the object does not support this attribute or method" will be reported.
Onclick does not cause the IE bubble process, while fireEvent will cause the bubble. fireEvent is more close to the user's real behavior trigger.
According to the second article, fireEvent can be fireEvent even if the DOM does not have a click event, without reporting an error (more close to the real user behavior)
Finally, you can test the code below:

<Ul onclick = 'alert (event. srcElement. innerHTML); '>
<Li id = 'id1' onclick = 'alert (1); '> I am one; </li>
<Li id = 'id2'> I am two; </li>
<Li id = 'id3 '> I am three; </li>
</Ul>
<Button onclick = 'document. getElementById ("id1"). onclick (); '> click me! </Button>
<Button onclick = 'document. getElementById ("id1"). fireEvent ("onclick") '> fireEvent! </Button>

Source: http://www.js8.in/731.html