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

I would like to share with you the example analysis of event binding and event flow model in JS. I believe most people don't know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

I. JS event

(1) JS event classification

1. Mouse event:

Click/dbclick/mouseover/mouseout

2.HTML event:

Onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

3. Keyboard event:

Keydown: triggered when the keyboard is pressed

Keypress: triggered instantly when the keyboard is pressed and lifted.

Keyup: keyboard lift trigger

[notes]

① execution order: keydown keypress keyup

② keypress can only capture numbers, letters, and symbolic keys, not function keys.

③ executes keydown--keypress in a long cycle on time

④ has keydown, but not necessarily keyup. When the leader loses focus on time, keyup will no longer be triggered.

⑤ keypress is case sensitive, keydown,kewup is not case sensitive.

4. Event factor:

When an event is triggered, the event passes a parameter to the function called by the event by default

This parameter is an event factor that contains various details of the event.

_ document.onkeydown=function (e) {console.log (e);} _ document.onkeydown=function () {console.log (window.event);} / compatible browser is written as: _ document.onkeydown=function (e) {esiglifole | | Window.event;var Code=e.keyCode | | e.which | | e.charCodescape if (code==13) {/ / enter}}

5. How do I determine the keyboard keys?

In the function where ① starts again, it receives the event factor e.

② can use e.key to go directly to the keystroke character pressed (not recommended).

③ can use keyCode/which/charCode to get the ASCII code value of the key at a time.

(compatible with all kinds of browsers)

Var Code=e.keyCode | | e.which | | e.charCoderamp / judgment key combination var isAlt=0,isEnt=0;_document.onkeyup=function (e) {if (e.keyCode==18) {isAlt=1;} if (e.keyCode==13) {isEnt=1;} if (isAlt==1&&isEnt==1) {alert ("press Alt and enter");}} _ document.onkeyup=function () {console.log ("keyup");} _ document.onkeypress=function () {console.log ("keypress");} _ document.onkeydown=function () {console.log ("keydown") } _ document.onkeypress=function () {console.log (window.event);} / / determine whether the enter key is pressed _ document.onkeydown=function (e) {var code=e.keyCode;if (code==13) {alert ("you entered the enter key");}} II. Event binding model

(1) DOM0 event model

Binding considerations:

① uses _ window.onload to bind after loading.

_ window.onload = function () {/ / event}

② is placed after the body for binding.

/ / body content inline model binding

Disadvantages: it does not comply with the basic specification of W3C about the separation of content and behavior.

two。 Script model (dynamic binding): by selecting a node in JS and then adding an onclick attribute to the node.

Document.getElementById ("btn1") = function () {}

Advantages: it conforms to the basic specification of content and behavior separation in W3C, and realizes the separation of html and js.

Disadvantages: the same node can only add the same type of event once, if added multiple times, the last one takes effect.

Document.getElementById ("btn1"). Onclick=function () {alert (1234);} document.getElementById ("btn1"). Onclick=function () {alert (234);} / / repeat only once

3.DOM0 has a common drawback: events bound through DOM0 cannot be undone once bound.

Document.getElementById ("btn3") .onclick=function () {/ / cannot cancel anonymous function if (btn.detachEvent) {btn.detachEvent ("onclick", func1);} else {btn.removeEventListener ("click", func1);} alert ("cancel DOM2");}

(2) DOM2 event model

1. Add DOM2 event bindings:

Before ① IE8, use .attachEvent ("onclick", function)

After ② IE8, use .addEventListener ("click", function, true/false)

Parameter 3: false (default) indicates event bubbling, and passing true indicates event capture.

③ is compatible with the handling of all browsers:

Var btn=document.getElementById ("btn1"); if (btn.attachEvent) {btn.attachEvent ("onclick", func1); / / event. The function IE8 that the event needs to execute can} else {btn.attachEventListener ("click", func1);}

Advantages of 2.DOM2 binding:

① the same node, and you can bind multiple events of the same type using DOM2.

② uses DOM2-bound events, which can be canceled by special functions.

3. Unbind the event:

① uses attachEvent binding and cancels with detachevent.

② uses attachEventListener binding and cancels with removeEventListenter.

Note: if the event bound by DOM2 needs to be cancelled, the callback function must be the function name when binding the event.

It cannot be an anonymous function, because when the event is canceled, the function name is canceled.

3. JS event flow model

(1) event flow model in JS

1. Event bubbling (not written by fasle/): when the event that triggers a node is, it starts from the current node and triggers the same type of event of its ancestor node in turn to the DOM root node.

two。 Event capture (true): when an event of a node is sent, it starts from the DOM root node and triggers the same type of event of its ancestor node in turn to the current node itself.

3. When did the event bubble? When is the event capture?

① event capture is indicated when addEventListener is used to bind events and the third parameter is passed to true

All event bindings other than ② are event bubbles.

4. Prevent the event from bubbling:

Before ① IE10, e.cancelBubble = true

After ② IE10, e.stopPropagation ()

5. Block default events:

Before ① IE10: e.returnValue = false

After ② IE10: e.preventDefault ()

/ / css#div1 {width: 300px; height: 300px; background-color: powderblue;} # div2 {width: 200px; height: 200px; background-color: deeppink;} # div3 {width: 100px; height: 100px; background-color:#A9A9A9;} / / html

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.