jQuery 我可以将哪些属性用于 event.target？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7723188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What properties can I use with event.target?
提问by frequent
I need to identify elements from which events are fired.
我需要确定触发事件的元素。
Using event.targetgets the respective element.
使用event.target获取相应的元素。
What properties can I use from there?
我可以从那里使用哪些属性？
- href
- id
- nodeName
- href
- ID
- 节点名
I cannot find a whole lot of info on it, even on the jQuerypages, so here is to hoping someone can complete the above list.
我找不到很多关于它的信息，即使在jQuery页面上也是如此，所以在这里希望有人能完成上面的列表。
EDIT:
编辑：
These may be helpful: selfHTML node propertiesand selfHTML HTML properties
这些可能会有所帮助：selfHTML 节点属性和selfHTML HTML 属性
采纳答案by Matt
event.targetreturns the DOM element, so you can retrieve any property/ attribute that has a value; so, to answer your question more specifically, you will always be able to retrieve nodeName, and you can retrieve hrefand id, provided the element hasa hrefand iddefined; otherwise undefinedwill be returned.
event.target返回 DOM 元素，因此您可以检索任何具有值的属性/属性；因此，更具体地回答你的问题，你随时都可以取回nodeName，并可以检索href和id，所提供的元素有一个href和id定义; 否则undefined将被退回。
However, inside an event handler, you can use this, which is set to the DOM element as well; much easier.
但是，在事件处理程序中，您可以使用this，它也被设置为 DOM 元素；容易多了。
$('foo').bind('click', function () {
// inside here, `this` will refer to the foo that was clicked
});
回答by Richard
If you were to inspect the event.targetwith firebug or chrome's developer tools you would see for a span element (e.g. the following properties) it will have whatever properties any element has. It depends what the target element is:
如果您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
回答by bhv
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
}
take advantage of using filter propeties
利用过滤器属性
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()`
回答by Trong Nguyen Duy
event.targetreturns 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
event.target返回函数所针对的节点。这意味着你可以对任何其他节点做任何你想做的事情，比如你从中得到的节点document.getElementById
I'm tried with jQuery
我尝试过 jQuery
var _target = e.target;
console.log(_target.attr('href'));
Return an error :
返回错误：
.attr not function
.attr 不起作用
But _target.attributes.href.valuewas works.
但是_target.attributes.href.value是作品。
回答by Alex
event.targetreturns 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
event.target返回函数所针对的节点。这意味着您可以对任何其他节点执行任何操作，例如您从中获得的节点document.getElementById
回答by damdeez
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".
在 Chrome 中查看特定 DOM 节点上所有属性的一种简单方法（我在 v.69 上）是右键单击元素，选择检查，然后单击“属性”而不是查看“样式”选项卡.
Inside of the Properties tab you will see all the properties for your particular element.
在“属性”选项卡内，您将看到特定元素的所有属性。
