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

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

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

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

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

• href
• 이드
• nodeName

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

편집:

selfHTML 노드 속성 및 self와 같은 기능이 도움이 될 수 있습니다.HTML HTML 속성

만약 당신이 검사를 한다면,event.target파이어버그 또는 크롬의 개발자 도구를 사용하면 스팬 요소(예: 다음 속성)에 대해 볼 수 있습니다.대상 요소가 무엇인지에 따라 달라집니다.

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

event.targetDOM 요소를 반환하므로 값이 있는 속성/속성을 검색할 수 있습니다. 따라서 질문에 보다 구체적으로 답하려면 항상 검색할 수 있습니다.nodeName그리고 당신은 검색할 수 있습니다.href그리고.id요소에 다음이 있는 경우href그리고.id정의됨; 그렇지 않은 경우undefined반환됩니다.

그러나 이벤트 핸들러 내에서 다음을 사용할 수 있습니다.thisDOM 요소에도 설정됩니다. 훨씬 쉽습니다.

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

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.valuewas works.

event.target 함수의 대상이 된 노드를 반환합니다.즉, 다른 노드와 마찬가지로 모든 노드에서 수행할 수 있는 모든 작업을 수행할 수 있습니다.document.getElementById

속성 값을 가져오려는 경우

event.target.getAttribute('attribute name')

Chrome에서 특정 DOM 노드의 모든 속성을 쉽게 볼 수 있는 방법은 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택한 다음 "Style" 탭을 보는 대신 "Properties"를 클릭하는 것입니다.

특성 탭 안에는 특정 요소에 대한 모든 속성이 표시됩니다.

속성 값을 가져오려면 다음을 사용하면 됩니다.

getAttribute('attributeName')

예:

e.target.getAttribute('attributeName')

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

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