Địa chỉ
  • Số 6 Nguyễn Biểu, thị trấn Liên Nghĩa, huyện Đức Trọng, tỉnh Lâm Đồng
Tải ứng dụng ngay

Hotline CN Đà Lạt

02633 666 777

11.7 The worth of so it while using addEventListener()

9 Tháng Bảy, 2022

11.7 The worth of so it while using addEventListener()

Within this publication I use new conflict title knowledge so you can site case object. In reality you can utilize one term you adore and its particular not unusual to see age otherwise evt.

The value of this inside of the event listener function passed to the addEventListener() method will be a reference to the node or object the event is attached too. In the code below I attach an event to a

and then using this inside of the event listener gain access to the

element the event is attached too.

When events are invoked as part of the event flow the this value will remain the value of the node or object that the event listener is attached too. In the code below we add a click event listener to the and regardless of if you click on the

or the the value of this always points to .

On top of that its possible making use of the experiences.currentTarget assets to discover the same resource, into the node or object invoking case listener, that this assets provides. Regarding the password lower than I control the big event.currentTarget feel object property showcasing it output the same really worth as this.

11.8 Referencing the mark of a meeting and never the fresh node or object the function is actually invoked towards the

Because of the event flow its possible to click a

, contained inside of a element and have a click event listener attached to the element get invoked. When this happens, the event object passed to the event listener function attached to the provides a reference (i.e. event.target) to the node or object that the event originated on (i.e. the target). In the code below when the

is clicked, the element’s click event listener is invoked and the event.target property references the orginal

that was the target of the click event. The event.target can be extremely useful when an event that fires because of the event flow needs knowledge about the origin of the event.

Consider that in our code example if the element is clicked instead of the

then the event target and the element node that the event listener is invoked on are the same. Therefore event.target, this, and event.currentTarget will all contain a reference to the element.

eleven.9 Cancelling default internet browser events having fun with preventDefault()

Browsers provide several events already wired up when an HTML page is presented to a user. For example, clicking a link has a corresponding event (i.e. you navigate to a url). So does clicking a checkbox (i.e. box is checked) or typing text into a text field (i.e. text is inputed and appears on screen). These browser events can be prevented by calling the preventDefault() method inside of the event handler function associated with a node or object that invokes a browser default event. In the code below I prevent the default event that occurs on a , , and