Shulou(Shulou.com)06/01 Report--

The weekend is boring, these days reviewed the JS basic programming 3, think that a good memory is not as good as wave pen wow, or write these things down, so that the foundation can be more solid, know the students can also directly go through, as a review, sister-in-law no longer have to worry about my study

Where do we start? ?

Type of event

DOM3 specifies the following event types:

UI events; onload,resize,scoll, etc.

Focus event

Mouse event

Roller event

Text event

Keyboard event

Change events; (also use less)

Change the name event, which is triggered when the attribute name of the element changes (it's useless, it's only needed when you need an editor)

UI event:

"DOMActivate": an event triggered by a user action (mouse or keyboard activation). Chrome (38) is valid, but not under firefox (34). The code is as follows. Click to open it to view:

Run the following code

Event type test document.body.addEventListener ("DOMActivate", function () {alert ("body")}, false) Document.getElementsByTagName ("pre") [0] .addEventListener ("DOMActivate", function () {alert ("pre")}, false)

"onload": triggered on window, object and img (script tags before PS:IE8 and IE8 do not support but support onreadystatechange, all elements in the IE family support this status attribute)

"unload": _ window.onuload, object.onunload. Image does not trigger onunload.

Run the following code

The deletion of the event type test / / image does not trigger the unload event; var I = document.createElement ("img"); document.body.appendChild (I); i.onload = function () {alert ("load")}; i.onunload = function () {alert ("onunload");} / / remember to add events first, because img tags will start loading as soon as url is added, and script and link tags will not start loading until they are added to DOM! important; i.src = "http://static.cnblogs.com/images/logo_small.gif"; document.body.removeChild (I)"

"error": this event is triggered when an error occurs in the execution of js code, or when tags such as img, object, script, etc. that require a remote resource are not requested, this event is not used much in practice.

Run the following code

Type of event _ window.onerror = function () {alert ("JS execution issued an error!")}; a (1)

Calc var startTime = null; var times = [] _ window.onresize = function () {if (startTime = null) {startTime = new Date (). GetTime ();}; times.push (new Date (). GetTime ()-startTime); console.log (new Date (). GetTime ()-startTime)}; function calc () {var len = times.length Var val = times.reduce (function (a return b) {return aforb}) / len; document.getElementsByTagName ("div") [0] [xss_clean] = val+ "milliseconds";}

Focus event: focus event can get the user's whereabouts on the interface.

Blur: triggers when you lose focus without bubbling

Focus: this happens when you focus, without bubbling.

DOMFocusIn: it's the same time as focusin, except that Dom 3 chose focusin.

DOMFocusOut: it's the same time as focusout, except that DOM3 chose focusout.

Focusin: the focus event of bubbling

Focusout: bubbling out-of-focus event

The code for detecting focus events is as follows. It can only be said that Firefox is not effective.

Run the following code

The result of the event type calc chrome: the result of focus focusin body focusin DOMFocusIn blur focusout body focusout DOMFocusOut firefox: "focus"blur" chorme all bubbling events are supported. Firefox 34 still only supports focus and blur, and the interface automatically starts with focus; var eventUtil = {add: function (el, type, handler) {if (el.addEventListener) {el.addEventListener (type, handler, false);} else if (el.attachEvent) {el.attachEvent ("on" + type, handler) } else {el ["on" + type] = handler;}}, off: function (el, type, handler) {if (el.removeEventListener) {el.removeEventListener (type, handler, false)} else if (el.detachEvent) {el.detachEvent (type, handler) } else {el ["on" + type] = null;}; var eBtn = document.getElementById ("btn") EventUtil.add (eBtn, "focus", function () {console.log ("focus")}) eventUtil.add (eBtn, "blur", function () {console.log ("blur")}) eventUtil.add (eBtn, "DOMFocusIn", function () {console.log ("DOMFocusIn")}) eventUtil.add (eBtn, "DOMFocusOut" Function () {console.log ("DOMFocusOut")}) eventUtil.add (eBtn, "focusout", function () {console.log ("focusout")}) eventUtil.add (eBtn, "focusin", function () {console.log ("focusin")}) EventUtil.add (document.body, "focusin", function () {console.log ("body focusin")}); eventUtil.add (document.body, "focusout", function () {console.log ("body focusout")}); / * document.body.onfocus = function () {console.log ("body focusin")} * /

Mouse and wheel you event:

DOM3 specifies 9 mouse events (.) Can you count it? is it exactly nine?

Click: generally, the left button triggers this event, and the right button triggers the right-click menu. If the current element is in focus, then pressing enter will also trigger the click event. This DEMO is not for you to click, but allows you to press enter when the button is focused:

Run the following code

Event type calc var eventUtil = {add: function (el, type, handler) {if (el.addEventListener) {el.addEventListener (type, handler, false);} else if (el.attachEvent) {el.attachEvent ("on" + type, handler) } else {el ["on" + type] = handler;}}, off: function (el, type, handler) {if (el.removeEventListener) {el.removeEventListener (type, handler, false)} else if (el.detachEvent) {el.detachEvent (type, handler) } else {el ["on" + type] = null;}; var eBtn = document.getElementById ("btn"); eventUtil.add (eBtn, "click", function () {alert ("click")})

Dblclick: triggered when the mouse is double-clicked, which is sometimes useful. If dblclick triggers, it will also trigger click events.

Run the following code

Event type calc var eventUtil = {add: function (el, type, handler) {if (el.addEventListener) {el.addEventListener (type, handler, false);} else if (el.attachEvent) {el.attachEvent ("on" + type, handler) } else {el ["on" + type] = handler;}}, off: function (el, type, handler) {if (el.removeEventListener) {el.removeEventListener (type, handler, false)} else if (el.detachEvent) {el.detachEvent (type, handler) } else {el ["on" + type] = null;}; var eBtn = document.getElementById ("btn"); eventUtil.add (eBtn, "click", function () {console.log ("click")}) eventUtil.add (eBtn, "dblclick", function () {console.log ("dblclick")}) / * console output: "click", "dblclick", "click" and "dblclick" conclude that two quick clicks will trigger a dblclick (dbl means the abbreviation of doubleclick) * /

As long as the event name contains mouse, it can only be triggered by the mouse, for example, events that cannot be triggered through the keyboard:

Mousedown

Mousemove

Mouseout

Mouseover

Mouseup

Mouseenter, (note that this event is only supported by the high version of chrome. This event is first created by ie, and jQ does compatible processing, so this event can be used under chrome)

Mouseleaver (note that this event is only supported by the high version of chrome. This event is first created by ie, and jQ does compatible processing, so this event can be used under chrome).

Because the most common clicks are the left mouse button, triggering dblclick triggers most mouse events

For example, if you want to trigger dblclick, you will trigger it in turn.

1: mousedown

2: mouseup

3: click

4: mousedown

5: mouseup

6: click

7: dblclick

To detect the compatibility of mouse events by:

Document.implementation.hasFeature ("MouseEvents", "2. 0") / / true (note that the name of DOM2's event detection is plural, to add one that is not used by SDOM3)

Document.implementation.hasFeature ("MouseEvent", "3.0") / / true

Document.implementation.hasFeature ("MouseEvent", "4.0") / / true

Document.implementation.hasFeature ("MouseEvent", "5.0") / / true

Chrome and firefox are two strange things (IE? What is IE? can you eat it? No matter how you pass it, it's true, damn it; IELTS, the new channel.

Properties of the event object:

Value of customer coordinates:

ClientX

ClientY

Value of page coordinates:

PageX

PageY

IE8 and earlier versions do not have the value of pageX, which can be calculated from the value of the customer indicator (clientX,clientY) and the scroll bar of the interface.

PageX = clientX + document.documentElement.scrollLeft | | document.body.scrollLeft (IE8 and the previous 2px are not processed)

PageY = clientY + document.documentElement.scrollTop | | document.body.scrollTop; (ibid.)

Coordinates of the screen:

ScreenX

ScreenY (I have never used these two attributes..)

Modify keys (hotkeys, also known as shortcut keys):

/ / these values are all under the event object

CtrlKey

ShiftKey

AltKey

MetaKey (window keys in WINDOW and CMD keys in Macintosh)

Related elements (relateTarget):

There is no relateTarget under IE. It is useless to have attributes such as toElement and fromElement;. The only use is to simulate these two events in browsers that do not support mouseenter and mouseleave (lower version of chrome).

Mouse button:

It is not usually used, that is, the difference between the left mouse button, the middle mouse button and the right mouse button when the mouse is pressed.

IE8 and previous regulations on mouse buttons are very different from DOM3, as stipulated by DOM3:

0: left mouse button

1: middle mouse button (scroll key)

2: right mouse button

Because both IE and DOM2,DOM3 button event attributes (event) have the attribute button, it must be judged by hasFearture (there is no other way, soga), so, the compatible code should be as follows:

Run the following code

If (document.implementation.hasFearture ("MouseEvents", "2.0") return event.button, else {swtich (event.button) {case 0: case 1: case 3: case 5: case 7: return 0 Case 2: case 6: return 2; case 4: return 1};}

Now it's time for the wheel incident:

The mouse wheel scrolls of IE and chrome and opera are all identified by event.wheelDelta

If the scroll wheel is scrolling up, then the wheelDelta is 120, and the downward value is-120; wow, wipe the mouse at home, how does the notebook wheel roll, ("Q") ╯, paste the code first

Run the following code

Type of event # btn {overflow: auto; width:400px; height:400px; background: # f0ad4e;} xx

Hehe

Hehe

Hehe

Hehe

Hehe var eventUtil = {add: function (el, type, handler) {if (el.addEventListener) {el.addEventListener (type, handler, false);} else if (el.attachEvent) {el.attachEvent ("on" + type, handler) } else {el ["on" + type] = handler }, off: function (el, type, handler) {if (el.removeEventListener) {el.removeEventListener (type, handler, false)} else if (el.detachEvent) {el.detachEvent (type, handler) } else {el ["on" + type] = null;}; var eBtn = document.getElementById ("btn"); eventUtil.add (eBtn, "mousewheel", function (ev) {ev = ev | | window.ev; console.log (ev.wheelDelta) }) / *

Firefox still doesn't have a mousewheel event. I'm going to spray it, or I'm going to use the DOMMouseScroll event for binding.

The rolling property value of Firefox's scroll wheel is different from that of chrome and ie. It is a property called detail, and the value is-3 up and 3 down (in the opposite direction, it's easier to remember)

To write compatible code, do this

Run the following code

Var eBtn = document.getElementById ("btn"); eventUtil.add (eBtn, "mousewheel", wheel) eventUtil.add (eBtn, "DOMMouseScroll", wheel); wheel = function () {ev = ev | | window.ev; if (ev.wheelDelta) {return ev.wheelDelta} else {return-ev.detail*3}}

Keyboard event:

Keydown, (it will be triggered repeatedly if the user holds it down, and the key is a little delayed.)

Keypress, (if the user holds down, the trigger will be repeated, and the key is a bit delayed.)

Keyup

TextInput (this event is new to DOM3)

Property information for the event:

Since it is user input, there must be an event attribute that is a string of information, and you don't even have to guess.

To get the string encoding entered by the user across browsers, you can use the

Run the following code

If (typeof event.charCode = = "number") {return event.charCode;} else {return event.keyCode;}

The value of keyCode contains the values of all keyboards such as carriage returns, tabs, arrow numeric keypads, F1 Magi F12.

CharCode simply represents the ascll encoding of pressed characters

All right, go to bed and have a rest for your eyes.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.