我可以对 event.target 使用哪些属性？

我需要确定触发事件的元素。

使用 event.target获取相应的元素。

我可以从那里使用什么属性？

  • Href
  • 身份证
  • NodeName

我不能找到一个完整的信息很多，即使在 JQuery页，所以这里是希望有人可以完成上述清单。

编辑:

这些可能是有帮助的: Self HTML 节点属性和 自我 HTML HTML 属性

275856 次浏览
小开
最佳答案

event.target返回 DOM 元素，因此您可以检索任何具有值的属性/属性; 因此，为了更具体地回答您的问题，您将始终能够检索 nodeName，并且您可以检索 href和 id，只要定义的元素 已经 a href和 id; 否则将返回 undefined。

但是，在事件处理程序内部，您可以使用 this，它也被设置为 DOM 元素; 这样更容易。

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

event.target 返回函数所针对的节点。这意味着您可以使用任何其他节点(比如从 document.getElementById获得的节点)执行任何操作

小开

如果你使用 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
小开

event.target返回函数所针对的节点。这意味着您可以对任何其他节点(比如从 document.getElementById获得的节点)执行任何您想要执行的操作

我试过用 jQuery

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

返回一个错误:

. attr not function

但 _target.attributes.href.value是有效的。

小开 
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
}

enter image description here

利用过滤器的特性

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

在 Chrome 中查看某个 DOM 节点上所有属性的一个简单方法是右键单击元素，选择查看，然后不查看“ Style”选项卡，而是单击“ Properties”。

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

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

如果要获取属性值

event.target.getAttribute('attribute name')
小开

如果你想得到一个属性值，你只需要使用:

getAttribute('attributeName')

例如:

e.target.getAttribute('attributeName')

提交答案