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


90

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

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

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

  • href
  • ID
  • nodeName

即使在jQuery页面上,我也找不到很多信息,因此希望有人可以完成上面的列表。

编辑:

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

Answers:


41

event.target返回DOM元素,因此您可以检索具有值的任何属性/属性;因此,更具体地回答你的问题,你随时都可以取回nodeName,并可以检索hrefid,所提供的元素一个hrefid定义; 否则undefined将被退回。

但是,在事件处理程序内部,您也可以使用this,它也设置为DOM元素。容易得多。

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

啊。谢谢!我提出了显示可用属性的链接。
频繁的

2
“ this”是指“ foo”还是“ event.target”?如果我在听文档上的scrollStart,并且在H1元素上触发了scrollStart,该如何获取H1?
频繁的

@frequent-理查兹的以下回答表明,您可以通过查看event.target.tagName来找到H1
Frazer Kirkman

140

如果您要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

21
据我所知,chrome在使用console.log时不再像这样打印DOM元素。您必须改为使用console.dir。
Astridax 2014年

是的,还不错!

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

1
<attribute>名称...为什么世界上除了您以外没有人告诉这个简单的答案?
karthikeayan

7

event.target返回该函数所针对的节点。这意味着您可以对任何其他节点做任何您想做的事情,例如您将从中得到的节点document.getElementById

我尝试过使用jQuery

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

返回错误:

.attr不起作用

但是_target.attributes.href.value是作品。


10
那是因为e.target它不是jQuery对象,.attr()而是jQuery的方法。如果您要尝试__target.getAttribute('href');,那就可以了。
卡诺

2

event.target返回该函数所针对的节点。这意味着您可以对任何其他节点做任何事情,例如您将从中得到的节点document.getElementById


1

一种简单的方法来查看Chrome中特定DOM节点上的所有属性(我在v.69上)是右键单击该元素,选择检查,然后单击“属性”而不是查看“样式”标签。

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


值得一提的是,现在不推荐使用此面板,而推荐使用console.dir。在Chrome 85上
ivanji

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

3
已经回答了这个问题,并为这些回答作了许多赞扬。您的答案哪种方式更好?您能解释一下您的解决方案吗?
Quality Catalyst
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.