event.target과 함께 사용할 수있는 속성은 무엇입니까?

event.target과 함께 사용할 수있는 속성은 무엇입니까?

---

이벤트가 발생하는 요소를 식별해야합니다.

사용 event.target하면 각 요소를 가져옵니다.

거기에서 어떤 속성을 사용할 수 있습니까?

• href
• 신분증
• nodeName

jQuery 페이지 에서도 많은 정보를 찾을 수 없으므로 누군가가 위의 목록을 완성 할 수 있기를 바랍니다.

편집하다:

도움이 될 수 있습니다 : selfHTML 노드 속성 및 selfHTML HTML 속성

---

event.targetDOM 요소를 반환하므로 값이있는 모든 속성 / 속성을 검색 할 수 있습니다. 그래서, 더 구체적으로 귀하의 질문에 대답하기 위해, 당신은 항상 검색 할 수있을 것입니다 nodeName, 당신은 검색 할 수 href및 id, 요소가 제공 이href 및 id정의; 그렇지 않으면 undefined반환됩니다.

그러나 이벤트 핸들러 내 this에서 DOM 요소로 설정된를 사용할 수도 있습니다 . 훨씬 쉽게.

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

---

event.targetfirebug 또는 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 returns the node that was targeted by the function. This means you can do anything you want to do with any other node like one you'd get from document.getElementById

I'm tried with jQuery

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

Return an error :

.attr not function

But _target.attributes.href.value was works.

---

event.target returns the node that was targeted by the function. This means you can do anything you would do with any other node like one you'd get from document.getElementById

---

An easy way to see all the properties on a particular DOM node in Chrome (I'm on v.69) is to right click on the element, select inspect, and then instead of viewing the "Style" tab click on "Properties".

Inside of the Properties tab you will see all the properties for your particular element.

참고URL : https://stackoverflow.com/questions/7723188/what-properties-can-i-use-with-event-target