Event object compatibility writing and event stream learning notes in js

1. event object: used to obtain event details, such as the mouse position and keyboard buttons. For example, you can obtain the abscissa of the mouse: event object. clientX. ClientX is the visible zone coordinate, and the scroll bar distance is document.doc umentElement. scrollTop ie) or document. body. scrollTop.

Since the event methods obtained in ie and chrome are different, in ie:

<script>    document.onclick = function(){         alert(event.clientX);    }</script>

But it won't work in chrom, so we need to do this in chrome:

<script>    document.onclick = function(ev){      alert(ev.clientX);        }</script>

The simplest method of compatibility is:

<Script> var Oevn = ev | event; // If ev is false, it indicates that the document is not in chrome. onclick = function () {alert (Oevn. clientX) ;}</script>

Note: chrome later versions now support event events directly.

Ii. event stream

Example:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
When we click the largest div, only the background of the div is displayed. However, when we click the smallest div, the background of the smallest, moderate, and largest div is displayed in sequence, this is the js bubble event. They will pass events to the parent level in sequence.

Js bubble events generally bring us difficulties without convenience. To prevent them from spreading, use Oevent. cancelBubble = true.
Example:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
In this way, the results of each step are obtained through alert prompts, such as Baidu translation and Baidu personal user information.


3. Move a div following the mouse:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
To sum up one point



This article is from the "Lang Yu Qingfeng" blog. For more information, contact the author!