Deep Learning of jQuery event objects and deep learning of jquery events

Deep Learning of jQuery event objects and deep learning of jquery events
* Directory [1] GET [2] event type [3] event Target [4] current element [5] event bubble [6] default behavior [7] namespace [8] Return Value [9] before the key value

When an event on the DOM is triggered, an event object is generated, which contains all event-related information. All browsers support event objects in different ways. JQuery encapsulates common attributes of event objects in compliance with W3C specifications, so that event processing can run properly in various Browsers without browser type judgment, this document describes jQuery event objects in detail.

 

Obtain

For DOM Event objects, the methods for obtaining event objects in the standard browser and IE8-browser are inconsistent. The standard browser event object is the first parameter in the event processing program, while the IE8-browser event object directly uses the event variable

JQuery adopts standard writing and is compatible with earlier ie browsers

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;background:pink;"></div><script>$('#box').click(function(event){    $(this).html(event.type);})</script>

Event Type

There are many types of events. The type attribute in the event object indicates the type of the event to be triggered.

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;background:pink;"></div><script>$('#box').on('click mouseover mouseout',function(event){    $(this).html(event.type);})</script>

Event Target

The target attribute of the event returns the current node of the event, that is, the node bound to the listener function being executed.

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul id="box">    <li class="in">1</li>    <li class="in">2</li></ul>    <script>$('#box').on('mousemove',function(event){    $(event.target).css('background-color','lightblue');})$('#box').on('mouseout',function(event){    $(event.target).css('background-color','transparent');})</script>

Current element

The currentTarget attribute always points to the current DOM element bound to the event, which is always equal to the value of this

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul id="box">    <li class="in">1</li>    <li class="in">2</li></ul>    <script>$('#box').on('mousemove',function(event){    $(event.currentTarget).css('background-color','lightblue');})$('#box').on('mouseout',function(event){    $(event.currentTarget).css('background-color','transparent');})</script>    

Event bubbling

DOM Event streams are divided into three phases: Event capture, event targeting, and event bubbling, because IE8-browser does not support event capture. JQuery does not support event capture.

StopPropagation ()

JQuery uses the standard writing stopPropagation () to prevent event bubbles

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn1"> button </button> <button id = "btn2"> block bubbling </button> <script> $ ('# btn1 '). on ('click', function () {alert (1) ;}); $ (document ). on ('click', function () {alert (0) ;}); $ ('# btn2 '). on ('click', function (event) {event. stopPropagation (); $ ('# btn1 '). on ('click', function (event) {event. stopPropagation () ;}); </script>

IsPropagationStopped ()

The event. isPropagationStopped () method is used to detect whether event. stopPropagation () has been called in the event object ()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').click(function(event){   alert(event.isPropagationStopped());//false   event.stopPropagation();   alert(event.isPropagationStopped());//true});</script>

StopImmediatePropagation ()

The stopImmediatePropagation () method can not only cancel further event bubbling, but also prevent other listening functions of the same event from being called.

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "btn1"> button 1 </button> <button id = "btn2"> button 2 </button> <script> $ ('# btn1 '). on ('click', function (event) {event. stopImmediatePropagation (); alert (1) ;}); $ ('# btn1 '). on ('click', function () {alert (2) ;}); $ ('# btn2 '). on ('click', function (event) {alert (1); event. stopPropagation () ;}); $ ('# btn2 '). on ('click', function () {alert (2) ;}); $ (document ). on ('click', function () {alert (0) ;}); </script>

IsImmediatePropagationStopped ()

The event. isImmediatePropagationStopped () method is used to detect whether event. stopImmediatePropagation () has been called in the event object ()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').click(function(event){   alert(event.isImmediatePropagationStopped());//false   event.stopImmediatePropagation();   alert(event.isImmediatePropagationStopped());//true});</script>

Default behavior

JQuery uses the event. preventDefault () method to prevent default behavior

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').contextmenu(function(event){   event.preventDefault();});</script>

IsDefaultPrevented ()

The event. isdefapreprevented () method can be used to detect whether the current event blocks the default event.

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').contextmenu(function(event){   alert(event.isDefaultPrevented());//false   event.preventDefault();   alert(event.isDefaultPrevented());//true});</script>

Namespace

The event. namespace attribute returns the namespace of the event.

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').bind('test.abc',function(event){  alert(event.namespace);//abc});$('#box').click(function(){    $('#box').trigger('test.abc');})</script>

Return Value

Event. result is the final return value of an event handler triggered by the event.

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height: 30px;background:lightblue"></div><script>$('#box').click(function(event){  return 123;});$('#box').click(function(event){    $('#box').html(event.result);})</script>

Key Value

The left-click, right-click, or scroll wheel must be determined in the mouse event. In Keyboard Events, You need to determine which button to press.

JQuery uses the event. whitch attribute of the event object to determine the mouse event and keyboard event key value.

<Script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <button id = "box" style = "height: 30px; width: 50px; background: lightblue "> button </button> <script> $ ('# box '). on ('keydown mouselow', function (event) {events (this).html (event. which) ;}); </script>