JQuery Event Object

---restore content starts---

Event object:

The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

1, when will the event object be generated:

For example, when a user clicks on an element, the event that we register with the element is triggered, and the essence of the event is a function, and the function's formal parameter receives an event object.

2, the event is usually used in conjunction with the function, and the function is not executed before the event occurs!

The origin of the event stream:

Because of Microsoft and Netscape, later had to develop a standard for the event propagation mechanism, because the event capture was developed by Netscape, and the event bubbling was developed by Microsoft, they all want their own technology to become standard, so the two companies are always dry, standard-setting people in order not to let them dry rack, So the event stream was developed.

About the Event object:

In the function that triggers the event, we receive an event object through which we need some parameters, for example, if we need to know who this event is for, we can get to it through the property target of event, or we want to block the default behavior of the browser through the method preventDefault() To prevent it. Here are some properties and methods of the event object

　　

Properties	Description
altkey
button
clientx
clienty
ctrlkey
metakey
relatedtarget
screenx
screeny
shiftkey

• IEProperties (in addition to the mouse/event properties above, IE also supports the following properties)

Properties	Description
cancelBubble	This property must be set to TRUE if the event handle wants to prevent the event from propagating to the containment object.
Fromelement	For mouseover and Mouseout events, fromelement references the element that is moved out of the mouse.
KeyCode	For the KeyPress event, this property declares the Unicode character code generated by the key being struck. For KeyDown and KeyUp
Offsetx,offsety	The x-coordinate and y-coordinate of the location of the event that occurred in the coordinate system of the event source element.
returnValue	If this property is set, its value is higher than the return value of the event handle. Set this property to
srcElement	A reference to the Window object, Document object, or Element object that generated the event.
Toelement	For mouseover and Mouseout events, this property refers to the element that is moved into the mouse.
X, y	The X-and y-coordinates of the location where the event occurred, relative to the most inner containment element that is dynamically positioned with CSS.

Standard Event Properties:

Properties and Methods	Description
Bubbles	Returns a Boolean value that indicates whether the event is a bubbling event type.
cancelable	Returns a Boolean value that indicates whether the event can hold a default action that can be canceled.
currentTarget	Returns the element whose event listener triggered the event.
Eventphase	Returns the current stage of event propagation.
target	Returns the element that triggered this event (the target node of the event).
TimeStamp	Returns the date and time the event was generated.
type	Returns the name of the event represented by the current event object.
Initevent ()	Initializes the properties of the newly created Event object.
preventDefault()	Notifies the browser not to perform the default action associated with the event.
stopPropagation()	No more events are being dispatched.

Some compatible notation for the event object:

• Get the Event object compatibility notation
  event || (event = window.event);
• Get target-compatible notation
  event.target||event.srcElement
• Block browser default behavior compatibility wording
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);
• Block bubbling notation
  event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

Binding events:

Syntax: Bind (TYPE,DATA,FN)

Binds an event handler function for each specific event that matches an element.

Type: the time type.

Data: An additional data object that is passed to the event object as the value of the events property.

fn: The handler function above the event that binds each matching element.

When each P tag is clicked, its text pops up:

　　

$ (function() {            $ (' P '). bind (' click ',function() {                alert ($ (this  ). Text ());})        })

You can pass some additional data before the event is processed:

$ (' P '). Bind (' mouseover click ', {name: ' Gu white '},function (EV) {
Alert (This). text ());
$ (this). Text (ev.data.name);
});

Cancels the default behavior by returning false and prevents the event from bubbling:

$ ("form"). Bind ("Submit", function () {return false;})

Only the default behavior is canceled by using the Preventdefault () method.

$ ("form"). Bind ("Submit", function (event) {  event.preventdefault ();});

To customize events and trigger custom events:

$ (' button '). Bind (' Myclick ', function (ev,a,b) {                alert (' Myclick trigger ');                alert (a);                alert (b);            })            Triggers a custom event.            document.getelementsbytagname (' button ') [0].onclick = function () {                $ (' button '). Trigger (' Myclick ', [up]);            }

One-time event:

$ (' button '). One (' click ', Function () {                alert (1);            })

Unbind event:

Unbind (TYPE,FN)

The reverse operation of BIND () removes the bound event from each matching element.

If there are no parameters, all bound events are deleted.

If you pass a handler function that is passed at bind time as the second argument, only that particular event handler will be deleted.

Parameter explanation:

type (String): (optional) event type

fn (Function): (optional) The event handler to be tied to the event of each matching element.

To cancel all the paragraph event bindings:

$ ("P"). Unbind ()

Unbind the Click event for a paragraph:

$ ("P"). Unbind ("click")

Removes a binding for a specific function, passing the function as the second parameter:

var foo = function () {                alert (' 111 ')            };            $ (' P '). bind (' Click MouseOver ', foo);            MouseOver is unbound, the click event is still valid            $ (' P '). Unbind (' mouseover ', foo);

Event delegate:

Popularly speaking, the event is onclick,onmouseover,onmouseout, and so is the event, commissioned, is to let others do, this event is added to some elements, but you add to others to do, complete this event.

Principle: Use the bubbling principle to add events to the parent, triggering the execution effect.

Role:

1, better performance.

2, for newly created elements, you can have events directly.

Event Source:

Same as this (he does not have to look at the problem, who is working on WHO) under the event object.

Usage scenarios:

1, the same event that is bound for many elements in the DOM.

2, binds an event to an element that does not already exist in the DOM.

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Document</title>    <Scripttype= "Text/javascript"src=".. /.. /jquery-3.3.1.js "></Script>    <Scripttype= "Text/javascript">        $(function(){            $('ul'). On ('Click','Li',function() {alert ($ ( This). text ());            }); $('ul'). Append ('<li> Hey hehe')        })    </Script></Head><Body>    <ul>        <Li>1</Li>        <Li>2</Li>        <Li>3</Li>        <Li>            <span>Ha ha haha</span>        </Li>    </ul></Body></HTML>

Grammar:

On (TYPE,SELECTOR,DATA,FN);

Bind one or more event handlers on the selected element.

Type: One or more space-delimited time types.

Selector: A selector string that filters the descendant elements in the selected element that can trigger events.

Data: The Event.data to be passed to the event handler when an event is triggered.

fn: callback function.

JQuery Event Object