Event.target ile hangi özellikleri kullanabilirim?

Olayların tetiklendiği öğeleri tanımlamam gerekiyor.

Kullanmak event.targetilgili öğeyi alır.

Oradan hangi özellikleri kullanabilirim?

• href
• İD
• nodeName

JQuery'de bile onun hakkında çok fazla bilgi bulamıyorum sayfalarında , bu yüzden birinin yukarıdaki listeyi tamamlayabileceğini umuyorum.

DÜZENLE:

Bunlar yardımcı olabilir: selfHTML düğüm özellikleri ve selfHTML HTML özellikleri

event.targetDOM öğesini döndürür, böylece bir değeri olan herhangi bir özelliği / özniteliği alabilirsiniz; Bu nedenle, sorunuzu daha net bir şekilde yanıtlamak için, her zaman geri nodeNamealabileceksiniz hrefve idöğenin a ve tanımlı olması koşuluyla geri alabilirsiniz ; aksi takdirde iade edilecektir.hrefidundefined

Ancak, bir olay işleyicisinin içinde this, DOM öğesine ayarlanmış olanı da kullanabilirsiniz ; daha kolay.

$('foo').bind('click', function () {
    // inside here, `this` will refer to the foo that was clicked
});

Eğer event.targetfirebug veya chrome geliştirici araçları ile inceleyecek olsaydınız, bir yayılma elemanı (örneğin aşağıdaki özellikler) için görürdünüz, herhangi bir elemanın sahip olduğu özelliklere sahip olacaktır. Hedef öğenin ne olduğuna bağlıdır:

event.target: HTMLSpanElement

attributes: NamedNodeMap
baseURI: "file:///C:/Test.html"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 36
clientLeft: 1
clientTop: 1
clientWidth: 1443
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: Text
firstElementChild: null
hidden: false
id: ""
innerHTML: "click"
innerText: "click"
isContentEditable: false
lang: ""
lastChild: Text
lastElementChild: null
localName: "span"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "SPAN"
nodeType: 1
nodeValue: null
offsetHeight: 38
offsetLeft: 26
offsetParent: HTMLBodyElement
offsetTop: 62
offsetWidth: 1445
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
outerHTML: "<span>click</span>"
outerText: "click"
ownerDocument: HTMLDocument
parentElement: HTMLElement
parentNode: HTMLElement
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 36
scrollLeft: 0
scrollTop: 0
scrollWidth: 1443
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "SPAN"
textContent: "click"
title: ""
webkitdropzone: ""
__proto__: HTMLSpanElement

window.onclick = e => {
    console.dir(e.target);  // use this in chrome
    console.log(e.target);  // use this in firefox - click on tag name to view 
}  

filtre özelliklerini kullanmanın avantajlarından yararlanın

e.target.tagName
e.target.className
e.target.style.height  // its not the value applied from the css style sheet, to get that values use `getComputedStyle()`

event.targetişlev tarafından hedeflenen düğümü döndürür. Bu, başka herhangi bir düğümle yapmak istediğiniz her şeyi yapabileceğiniz anlamına gelir.document.getElementById

JQuery ile denedim

var _target = e.target;
console.log(_target.attr('href'));

Bir hata döndür:

.attr işlev değil

Ama _target.attributes.href.valueişe yaradı.

event.targetişlev tarafından hedeflenen düğümü döndürür. Bu, başka herhangi bir düğümle yapacağınız her şeyi yapabileceğiniz anlamına gelir.document.getElementById

Chrome'da belirli bir DOM düğümündeki tüm özellikleri görmenin kolay bir yolu (v.69'dayım) öğeye sağ tıklamak, denetlemeyi seçmek ve ardından "Stil" sekmesini görüntülemek yerine "Özellikler" e tıklamaktır. .

Özellikler sekmesinin içinde, belirli öğenizin tüm özelliklerini göreceksiniz.

//Do it like---
function dragStart(this_,event) {
    var row=$(this_).attr('whatever');
    event.dataTransfer.setData("Text", row);
}