Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Preface:

JavaScript passes event objects, or event objects, by default in event handlers. But because of the compatibility of browsers, developers will always make compatibility decisions. JQuery solves these problems in encapsulation, and also creates some very useful properties and methods.

one The event object

An event object is an event object, which is passed by default through a handler. The e that handled the function was the Event event object. The event object has many properties and methods available. We have looked at these commonly used properties and methods in detail in JavaScript lessons.

// Pass event objects through handlers
$('input').bind('click', function (e) { // Accepts the event object argument
alert(e);
});
Copy the code

Get the name of the triggering event via the event.type property

$('input').click(function (e) {
alert(e.type);
});
Copy the code

Get the bound DOM element via event.target

$('input').click(function (e) {
alert(e.target);
});
Copy the code

Get additional data from event.data, which can be numbers, strings, arrays, objects

$('input').bind('click'.123, function () { // Pass data
alert(e.data); // Get digital data
});
Copy the code

Note: pass: ‘123’ if a string, [123,’ ABC ‘] if an array, {user: ‘Lee’, age: 100} if an object. The array is called e.data.user [1] and the object is called e.data.user. Event.data gets additional data, which can also be used for encapsulated shorthand events

$('input').click({user : 'Lee', age : 100},function (e) {
alert(e.data.user);
});
Copy the code

Note: Keys of key-value pairs can be quoted or not; You can also use an array when calling: alert(e.ata [‘user’]); Gets the DOM element moved in before the div

$('div').mouseover(function (e) {
alert(e.relatedTarget);
});
Copy the code

Gets the DOM element that reaches the nearest element after moving out of the div

$('div').mouseout(function (e) {
alert(e.relatedTarget);
});
Copy the code

Gets the bound DOM element, equivalent to this, which is distinguished from event.target

$('div').click(function (e) {
alert(e.currentTarget);
});
Copy the code

Note: Event. target gets the DOM of the triggering element, and event.currentTarget gets the DOM of the listening element. And this is the DOM that gets the listening element. Gets the return value of the previous event

$('div').click(function (e) {
return '123';
});
$('div').click(function (e) {
alert(e.result);
});
Copy the code

Gets the current timestamp

$('div').click(function (e) {
alert(e.timeStamp);
});
Copy the code

Gets the left, middle and right mouse buttons

$('div').mousedown(function (e) {
alert(e.which);
});
Copy the code

Gets the keys of the keyboard

$('input').keyup(function (e) {
alert(e.which);
});
Copy the code

Gets whether CTRL key is pressed, meta key does not exist and cannot be used

$('input').click(function (e) {
alert(e.ctrlKey);
});
Copy the code

Gets the current position of the trigger element mouse

$(document).click(function (e) {
alert(e.screenY+ ', ' + e.pageY + ', ' + e.clientY);
});
Copy the code

two Bubbling and default behavior

Bubbling occurs when multiple elements overlap in a page and the overlapping elements are bound to the same event. HTML page

<div style="width:200px; height:200px; background:red;">
<input type="button" value="Button" />
</div>
// Three different elements fire events
$('input').click(function () {
alert('Button triggered! ');
});
$('div').click(function () {
alert('Div layer is triggered! ');
});
$(document).click(function () {
alert('Document page triggered! ');
})
Copy the code

Note: when we click on a document, only the document event is triggered; When we click on the div layer, both the div and the document are triggered; When we click the button, it triggers the button, div, and document. The sequence of triggers is small to large. This is called bubbling, layer by layer.

JQuery provides an event object method: Event.stopPropagation (); When this method is set to the event to fire, all upper-level bubbling is cancelled.

$('input').click(function (e) {
alert('Button triggered! ');
e.stopPropagation();
});
Copy the code

Elements in a web page have their own default behavior when they operate. For example: right click the input area of the text box, the system menu will pop up, click the hyperlink will jump to the specified page, click the submit button will submit data.

$('a').click(function (e) {
e.preventDefault();
});
Copy the code

Disallow submission of form jumps

$('form').submit(function (e) {
e.preventDefault();
});
Copy the code

Note: If you want the above hyperlink to prevent both default behavior and bubble behavior, write both methods: event.stopPropagation() and event.preventDefault(). If both methods need to be enabled at the same time, there is an alternative shorthand, which is simply return false.

$('a').click(function (e) {
return false;
});
Copy the code

Determines whether the default behavior of the element is cancelled

$('input').keyup(function (e) {
e.preventDefault();
alert(e.isDefaultPrevented());
});
Copy the code

Cancel bubbling and cancel subsequent event handlers

$('input').click(function (e) {
alert('input');
e.stopImmediatePropagation();
});
$('input').click(function () {
alert('input2');
});
$(document).click(function () {
alert('document');
})
Copy the code

; Check whether the stopPropagation() method is called

$('input').click(function (e) {
e.stopPropagation();
alert(e.isPropagationStopped());
});
Copy the code

Determine whether the stopImmediatePropagation() method has been executed

$('input').click(function (e) {
e.stopImmediatePropagation();
alert(e.isImmediatePropagationStopped());
});
Copy the code

Conclusion:

The above is the whole process of the event object, the original is not easy, looking forward to your likes attention and forwarding comments 😜😜😜Copy the code