Tôi có thể sử dụng thuộc tính nào với event.target?

Tôi cần xác định các yếu tố mà từ đó các sự kiện được kích hoạt.

Sử dụng event.targetnhận được phần tử tương ứng.

Tôi có thể sử dụng những thuộc tính nào từ đó?

• href
• Tôi
• Tên nút

Tôi không thể tìm thấy nhiều thông tin về nó, ngay cả trên các trang jQuery , vì vậy tôi hy vọng ai đó có thể hoàn thành danh sách trên.

BIÊN TẬP:

Những điều này có thể hữu ích: thuộc tính nút selfHTML và thuộc tính HTML selfHTML

event.targettrả về phần tử DOM, vì vậy bạn có thể truy xuất bất kỳ thuộc tính / thuộc tính nào có giá trị; vì vậy, để trả lời câu hỏi của bạn cụ thể hơn, bạn sẽ luôn có thể truy xuất nodeNamevà bạn có thể truy xuất hrefvà id, miễn là phần tử có a hrefvà idđược xác định; nếu không undefinedsẽ được trả lại.

Tuy nhiên, bên trong trình xử lý sự kiện, bạn có thể sử dụng this, được đặt thành phần tử DOM; dễ dàng hơn nhiều.

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

Nếu bạn kiểm tra event.targetbằng firebug hoặc các công cụ dành cho nhà phát triển của chrome, bạn sẽ thấy phần tử span (ví dụ: các thuộc tính sau) nó sẽ có bất kỳ thuộc tính nào mà bất kỳ phần tử nào có. Nó phụ thuộc vào yếu tố mục tiêu là gì:

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 
}  

tận dụng lợi thế của việc sử dụng các bộ lọc

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.targettrả về nút được nhắm mục tiêu bởi hàm. Điều này có nghĩa là bạn có thể làm bất cứ điều gì bạn muốn với bất kỳ nút nào khác giống như nút bạn nhận được từdocument.getElementById

Tôi đã thử với jQuery

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

Trả lại một lỗi:

.attr không phải hàm

Nhưng _target.attributes.href.valuelà công việc.

event.targettrả về nút được nhắm mục tiêu bởi hàm. Điều này có nghĩa là bạn có thể làm bất cứ điều gì bạn muốn làm với bất kỳ nút nào khác giống như nút bạn nhận được từdocument.getElementById

Một cách dễ dàng để xem tất cả các thuộc tính trên một nút DOM cụ thể trong Chrome (tôi đang sử dụng phiên bản 69) là nhấp chuột phải vào phần tử, chọn kiểm tra, sau đó thay vì xem tab "Kiểu", hãy nhấp vào "Thuộc tính" .

Bên trong tab Thuộc tính, bạn sẽ thấy tất cả các thuộc tính cho phần tử cụ thể của mình.

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