ฉันสามารถใช้คุณสมบัติอะไรกับ event.target ได้บ้าง

ฉันจำเป็นต้องระบุองค์ประกอบที่เกิดขึ้นจากเหตุการณ์

การใช้event.targetรับองค์ประกอบที่เกี่ยวข้อง

ฉันสามารถใช้คุณสมบัติอะไรได้บ้างจากที่นั่น?

• href
• id
• nodeName

ฉันไม่สามารถหาข้อมูลทั้งหมดได้แม้แต่ในหน้าjQueryดังนั้นนี่คือการหวังว่าใครบางคนจะสามารถทำรายการด้านบนได้

แก้ไข:

สิ่งเหล่านี้อาจเป็นประโยชน์: คุณสมบัติโหนดselfHTMLและคุณสมบัติselfHTML HTML

event.targetส่งคืนองค์ประกอบ DOM เพื่อให้คุณสามารถดึงคุณสมบัติ / แอตทริบิวต์ที่มีค่าได้ ดังนั้นเพื่อตอบคำถามของคุณให้เจาะจงมากขึ้นคุณจะสามารถดึงข้อมูลได้nodeNameตลอดเวลาและคุณสามารถดึงข้อมูลhrefและidหากองค์ประกอบนั้นมีhrefและidกำหนดไว้ มิฉะนั้นundefinedจะถูกส่งกลับ

อย่างไรก็ตามภายในตัวจัดการเหตุการณ์คุณสามารถใช้thisซึ่งตั้งค่าเป็นองค์ประกอบ DOM ได้เช่นกัน ง่ายกว่ามาก.

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

หากคุณต้องตรวจสอบevent.targetด้วยเครื่องมือสำหรับนักพัฒนาของ firebug หรือ chrome คุณจะเห็นองค์ประกอบ span (เช่นคุณสมบัติต่อไปนี้) มันจะมีคุณสมบัติใด ๆ ที่องค์ประกอบใด ๆ มี ขึ้นอยู่กับองค์ประกอบเป้าหมาย:

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 
}  

ใช้ประโยชน์จากการใช้คุณสมบัติตัวกรอง

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.targetส่งคืนโหนดที่ถูกกำหนดเป้าหมายโดยฟังก์ชัน ซึ่งหมายความว่าคุณสามารถทำอะไรก็ได้ที่คุณต้องการทำกับโหนดอื่น ๆ ที่คุณต้องการdocument.getElementById

ฉันลองใช้ jQuery

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

ส่งคืนข้อผิดพลาด:

.attr ไม่ทำงาน

แต่_target.attributes.href.valueก็ใช้ได้ผล

event.targetส่งคืนโหนดที่ถูกกำหนดเป้าหมายโดยฟังก์ชัน ซึ่งหมายความว่าคุณสามารถทำอะไรก็ได้ที่คุณทำกับโหนดอื่น ๆ เช่นเดียวกับที่คุณได้รับdocument.getElementById

วิธีง่ายๆในการดูคุณสมบัติทั้งหมดบนโหนด DOM เฉพาะใน Chrome (ฉันใช้เวอร์ชัน 69) คือคลิกขวาที่องค์ประกอบเลือกตรวจสอบจากนั้นแทนที่จะดูแท็บ "สไตล์" ให้คลิกที่ "คุณสมบัติ" .

ภายในแท็บคุณสมบัติคุณจะเห็นคุณสมบัติทั้งหมดสำหรับองค์ประกอบเฉพาะของคุณ

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