JavaScript Event Learning Chapter 7: Event attributes

To understand the Event attributes, I will provide some sample code here. In this category, there are very serious browser compatibility problems.

When we want to read some information about the Event, it is often lost in a large number of attributes. Most of these attributes cannot run well in most browsers. The event compatibility list is provided here.

I don't plan to give these attributes a table, because these situations are too confusing and will not help you with your learning. Before writing five pieces of code, I need to ask five questions about the browser.

1. What is the event type?
2. Which HTML element is the event Target?
3. Which keys are pressed when an event occurs?
4. Which mouse key was pressed when the Event occurred?
5. Where is the mouse position when an Event occurs?

I have answered the last question in detail here.

Please note that I have performed very rigorous object checks for these codes. I first created cross-browser access to events, and then checked browser support before using each attribute.

1. What is the event type?
This is a cross-browser question with a standard answer: You can view its properties using the type attribute:

Function doSomething (e) {<BR> if (! E) var e = window. event; <BR> alert (e. type); <BR >}< BR> <BR>

2. Which HTML element is the event Target?
W3C/Netscape: target. No, Microsoft said it was srcElement. Both attributes return the HTML element when the event occurs.

Function doSomething (e) {<BR> var targ; <BR> if (! E) var e = window. event; <BR> if (e.tar get) targ = e.tar get; <BR> else if (e. srcElement) targ = e. srcElement; <BR> if (targ. nodeType = 3) // defeat Safari bug <BR> targ = targ. parentNode; <BR >}< BR> <BR>

The last two lines of code are specifically for Safari. If the event occurs on an element that contains text, the text node instead of the element itself becomes the event target. Therefore, we need to check if the target nodetype is 3 (text node ). If it is, we will move it to the parent node, the HTML element.

Even if the event is captured or bubble up, the target/srcElement attribute is still the first element that generates the event.

Other targets
There are also many targeting attributes. I have discussed currentTarget In the Event Order article, and relatedTarget, fromElement, and toElement in the Mouse event article.

3. Which keys are pressed when an event occurs?
This problem is relatively simple. First, obtain the code for the key from the keyCode attribute (a = 65 ). After you get the key value, you can use the String. fromCharCode () method to know the actual key value, if necessary.

Function doSomething (e) {<BR> var code; <BR> if (! E) var e = window. event; <BR> if (e. keyCode) code = e. keyCode; <BR> else if (e. which) code = e. which; <BR> var character = String. fromCharCode (code); <BR> alert ('character was' + Character); <BR >}< BR>

In some cases, keyboard events may be difficult to use. For example, the time for triggering a kepress event is as long as the time for the user to press the key. However, the keydown trigger time in most browsers is as long as the press time. I'm not sure if this is a good idea, but it is.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page