Event streams, event objects, and jquery

Event Flow

Multiple nested elements of each other, they have the same event, the most internal element event is triggered, the outside of multiple elements of the same type of event will be triggered, multiple elements of their same type of events concurrently executing the effect is called "event flow"

Example:
HTML code:

<div class= "One" ><div class= "one" ><div class= "three" ></div></div></div>

CSS style code:

. one{width:200px;height:200px;background:red;　　}.two{width:100px;height:100px;background:blue;　　}.three{width:50px;height:50px;background:green; }

JS Code:

Find elements
var one = Document.getelementsbyclassname (' one ') [0];var-Document.getelementsbyclassname (' both ') [0];var three = Document.getelementsbyclassname (' three ') [0];
Add Event
One.onclick = function (evt) {
Console.log (' one ');
}
Two.onclick = function (evt) {
Console.log (' both ');

}
Three.onclick = function (evt) {
Console.log (' three ');

}

The result: When you click the div of a class of either or three, the bottom one layer is displayed

Event Object

Event objects, each event (including mouse, keyboard events) trigger the execution of the process, there are corresponding event objects, through the event object can get the mouse relative to the page coordinate information, through the event object can also be aware of what keys are triggered execution, through the event object can also block the event stream generation, block browser default action.

Example:
HTML code:

<input type= "text" id= "TXT" ><button onclick= "Denglu ()" > Login </button>

JS Code:

var input1 = document.getElementById (' txt ');
Trigger event when keyboard key presses down Input1.onkeydown = function (evt) {var code = Evt.keycode;
Type enter return if (code = =) {Denglu ();}} /* Method */function Denglu () {alert (' login successful ');}

Block Event Flow:

Evt.stoppropagation ();

Event.keycode get key code information corresponding to the keyboard

Jquery

The JS file of jquery must be introduced

Page loading complete
Js

  Window.onload = function () {}

Jquery

Mode one    $ (document). Ready (function () {            })//Mode two    $ (function () {            })

JS and jquery find element manipulation elements
1. Find the element

  JS  document.getElementById ();        document.getElementsByTagName ();    .. jquery         $ (' selector ');
For example
$ ("img")//extract the Elements of the IMG tag
$ ("#aa")//extract element with ID AA
$ (". BB")//Extract the element class for BB
/* Custom */
$ (this)//extract elements of the current HTML
$ ("P:first")//Select the first <p> element
$ ("[href]")//Select an element with an HREF attribute

JS Object jsobj jquery Object Jqobj

2. Operation Contents

No equals is obtained, an equal sign is an assignment
Js

Non-form elements  
jsobj.innerhtml   jsobj.innerhtml= 123;

   Table cell element    Jsobj.value   = 123;

Jquery

  Non-table cell element jqobj.html ()  

  Table cell element    Jqobj.val ()     

3. Operation Properties
Js

Jsobj.getattribute (attribute name);//Extract attribute value Jsobj.setattribute (name, value);//Add attribute Jsobj.removeattribute (attribute name);//Delete property

For example:

  Jsobj.getattribute ("class");   Jsobj.setattribute ("Class", "Add")   Jsobj.removeattribute ("class");

Jquery

Jqobj.attr (' class ', ' Add ');//A parameter is to get two parameters that are set jqobj.attr ({' Class ': ' Add ', ' ID ': ' ID '});//Set multiple properties in JSON format data  Jqobj.removeattr ()//delete attribute  jqobj.addclass (' Add ');//Add a Classs property with a value of add

4. Operation Style
Js

        JsObj.style.color = "red";//only inline styles can be manipulated

Jquery

   Jqobj.css ();

For example:

$ ("P"). CSS ("Background-color");//Extract style properties $ ("P"). CSS ("Background-color", "yellow");//Add Style $ ("P"). CSS ({" Background-color ":" Yellow "," font-size ":" 200% "}); add multiple styles

5. Operation Events
Js

     Jsobj.onclick = function () {}

Jquery

  Jqobj.click (function () {});

Add Delete Element

adding elements   
jqobj.html (' <button></button> ');

Show ()

Example:

Basic Display hidden

HTML code:

1 <  style= "width:100px;height:100px; background:red;" >123</div>

View Code

JQ Code:

1 var jqdd = $ (' div '). EQ (0);//Get div and define variables 2 //Timer 3 setTimeout (function () {4    //Slowly hides 5    jqdd.hide (' Slow ', function () {  6        //Slowly show 7        jqdd.show (' slow '); 8     }); 9 },1000);

1 var jqdd = $ (' div '). EQ (0); 2 setTimeout (function () {3    jqdd.hide (' Slow ', function () {4         Jqdd.show (' slow '); 5     }); 6 },1000)

Event streams, event objects, and jquery