我可以将哪些属性与 event.target 一起使用？

Question

我需要识别触发事件的元素。

使用

event.target

获取相应的元素。

我可以从那里使用哪些属性？

• 参考
• id
• 节点名称

我找不到关于它的大量信息，即使在 jQuery 页面上也是如此，所以这里希望有人能够完成上面的列表。

编辑：

这些可能会有所帮助：selfHTML 节点属性 和 selfHTML HTML 属性

Answer 1

如果您使用 firebug 或 chrome 的开发工具检查

event.target

，您会看到 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

Answer 2

event.target

返回 DOM 元素，因此您可以检索任何具有值的属性；因此，为了更具体地回答您的问题，您始终能够检索

nodeName

，并且可以检索

href

和

id

，前提是元素 has 定义了

href

和

id

；否则

undefined

将被退回。

但是，在事件处理程序中，您可以使用

this

，它也设置为 DOM 元素；容易多了。

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

Answer 3

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()`

Answer 4

event.target

返回函数所针对的节点。这意味着您可以对任何其他节点执行任何您想做的操作，就像您从

document.getElementById

获得的节点一样

我尝试过使用 jQuery

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

返回错误：

.attr 不起作用

但是

_target.attributes.href.value

是有效的。

Answer 5

event.target

返回函数所针对的节点。这意味着您可以对任何其他节点执行任何操作，就像从

document.getElementById

获得的节点一样

Answer 6

如果你想获取属性值

event.target.getAttribute('attribute name')

Answer 7

在 Chrome 中查看特定 DOM 节点上的所有属性（我使用的是 v.69）的一个简单方法是右键单击该元素，选择“检查”，然后不查看“样式”选项卡，而是单击“属性” ”。

在“属性”选项卡内，您将看到特定元素的所有属性。

Answer 8

如果你想获取一个属性值，你只需要使用：

getAttribute('attributeName')

示例：

e.target.getAttribute('attributeName')

Answer 9

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

Answer 10

如何在不使用“开发人员工具”的情况下列出任何对象的所有属性

我们并不总是能够在个人计算机上打开“开发人员工具”。现在，到 2024 年，许多开发人员直接在智能手机上进行编程，而在智能手机上我们没有像 PC 上那样的“开发人员工具”。

但即使在智能手机上，您也可以检查每个对象并可以查看对象的所有属性。

对于这种情况，我们可以使用

for in

循环:

for...in

语句迭代对象的所有可枚举字符串属性（忽略由符号键入的属性），包括继承的可枚举属性。

我们可以像下面这样使用它：

for(var property in anyObject)
    console.log(property + ': ' + anyObject[property]);

因此，例如，如果您想查看

event.target

属性，那么您可以这样做：

function writeProperties()
{
    var str = '';
    for (var i in event.target)
        str += '<b style="color:green">' + i + '</b>: ' + event.target[i] + '<hr>';
    
    document.querySelector('#output').innerHTML = str;
}

<button onclick="writeProperties()">Write all properties from event.target</button>
<div id="output"></div>

开始上面的代码片段后，您将看到该按钮，单击该按钮后，您将看到该按钮对象的所有属性，因为在

event.target

中将是该按钮对象。

但是，除了

event.target

，您还可以使用

window

或

document

对象来观察它们。您可以使用普通 JavaScript 编写自己的“Insperter 应用程序”，而无需使用“开发人员工具”。试试吧！