May 30, 2021 Article blog
The variables in the event handler now hold the event object. T he event.target property holds the target element that produces the event. T his property is specified in the DOM API, but is not implemented by all browsers. j Query has made the necessary expansion of this event object to be able to use this property in any browser. W ith .target, you can be sure that the element of the event (that is, the element that was actually clicked) is received first in the DOM. Also, we know that this is using dom elements that handle events, so we can write the following code:
$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
})
})
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){
$('#switcher .button').toggleClass('hidden');
}
})
})
The code at this point ensures that the element being clicked is < div id "switcher" >, not other descendant elements. N ow, clicking the button no longer collapses the style converter, and clicking the border triggers the collapse operation. H owever, clicking on a label doesn't produce anything, because it's also a descendant element. In fact, instead of putting the check code here, we can reach the target by modifying the actions of the buttons.
The event object also provides a .stopPropagation() method that completely suppresses event bubbling. S imilar to .target, this approach is a pure JavaScript feature, but cannot be used securely in a cross-browser environment. However, as long as we register all event handlers through jQuery, we can rest assured that this method will be used.
Next, we'll delete the check statement that we just added, event.target, and add some code to the button's click handler:
$(document).ready(function(){
$('#switcher .button').click(funtion(event){
//……
event.stopPropagation();
})
})
As before, you need to add an argument to a function that is used as a click handler to access the event object. T hen, by simply calling event.stopPropagation() you can avoid all other DOM elements responding to this event. A s a result, the event of clicking the button is processed by the button, and only by the button. Click elsewhere in the style converter to collapse and expand the entire area.
If we register the click event handler with an anchor element instead of an outer < div >, then there is another problem: when the user clicks the link, the browser loads a new page. S uch actions are not the same concept as the event handlers we discuss, they are acquiescing to clicking on anchor elements. Similarly, when a user presses enter after editing a form, the form's submit event is triggered, and the form submission does not actually occur until the event is generated.
If we don't want to perform such acquiescence, then calling the .stopPropagation() method on the event object is also a water charge, because acquiescence is not generated in the normal event propagation flow. In such cases, the .preventDefault() method can terminate the event before triggering a tacit action.
Tip .preventDefault() is typically used when some validation is completed in the context of the event. F or example, during a form submission, we check whether the user has filled in the required fields, and if the user does not fill in the fields, then the tacit approval needs to be prohibited. We'll discuss form validation in more detail in Chapter 8.
Event propagation and acquiescence are two separate mechanisms that can terminate the other when either party arises. If you want to stop event propagation and acquiesce at the same time, you can return false in the event handler, which is a shorthand for calling both .stopPropagation() and .preventDefault() on the event object.