我需要识别触发事件的元素。
使用event.target
获取相应的元素。
我可以在那里使用哪些属性?
即使在jQuery页面上,我也找不到很多相关信息,所以希望有人可以填写上面的列表。
修改
答案 0 :(得分:107)
如果您要使用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
答案 1 :(得分:34)
event.target
返回DOM元素,因此您可以检索具有值的任何属性/属性;因此,为了更具体地回答您的问题,您将始终能够检索nodeName
,并且您可以检索href
和id
,前提是元素 href
和id
已定义;否则undefined
将被退回。
但是,在事件处理程序中,您可以使用this
,它也设置为DOM元素;更容易。
$('foo').bind('click', function () {
// inside here, `this` will refer to the foo that was clicked
});
答案 2 :(得分:12)
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()`
答案 3 :(得分:5)
event.target
返回该函数所针对的节点。这意味着您可以对任何其他节点执行任何操作,例如您从document.getElementById
获取的节点
我尝试过使用jQuery
var _target = e.target;
console.log(_target .attr('href'));
返回错误:
.attr not function
但是_target.attributes.href.value
是有效的。
答案 4 :(得分:2)
event.target
会返回该函数定位的节点。这意味着您可以对任何其他节点执行任何操作,例如您从document.getElementById
答案 5 :(得分:1)
一种简单的方法来查看Chrome中特定DOM节点上的所有属性(我在v.69上)是右键单击该元素,选择检查,然后单击“查看”,而不是查看“样式”标签“属性”。
在“属性”标签内,您将看到特定元素的所有属性。
答案 6 :(得分:0)
//Do it like---
function dragStart(this_,event) {
var row=$(this_).attr('whatever');
event.dataTransfer.setData("Text", row);
}