Gebeurtenis Element in die Event Voorwerp in JavaScript

Die Event voorwerp laat ook toe om die element te verkry waarin die gebeurtenis plaasgevind het. Hierdie element word in die eienskap target bevat. Waarom is dit nodig, aangesien hierdie element in this vervat is?

Die saak is dat this altyd die element bevat waaraan die gebeurtenis gekoppel was, terwyl die eienskap target die element bevat waarop regtig geklik is. Hierdie werklike element kan met this ooreenstem, of dit mag nie ooreenstem nie.

Kom ons kyk na 'n voorbeeld. Laat ons aanneem ons het 'n div, en binne dit 'n paragraaf:

<div id="elem">
	<p>teks</p>
</div>

Laat ons 'n gebeurtenis aan die div koppel, maar klik op die paragraaf. Dit is duidelik dat 'n klik op die paragraaf terselfdertyd ook 'n klik op die div is, aangesien die paragraaf in ons div vervat is.

In die beskrywe geval sal die eienskap target die finale tag bevat, waarin die gebeurtenis plaasgevind het - dit wil sê die paragraaf, en nie die div nie. Kom ons verifieer dit:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // sal ons paragraaf uitvoer
	console.log(this);         // sal ons div uitvoer
});

Laat ons aanneem jy het 'n lys ul met li tags:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Koppel 'n klikhanterer aan die ul tag. In hierdie hanterer, kontroleer met behulp van die tagName eienskap, op watter tag geklik is. As daar op die li tag geklik is - voeg 'n uitroepteken by die einde van die teks van daardie tag. En as daar op die ul tag geklik is - gee inligting hieroor in die konsole uit.