【问题标题】:What properties can I use with event.target?event.target 可以使用哪些属性?
【发布时间】:2011-12-05 02:37:47
【问题描述】:

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

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

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

  • href
  • 身份证
  • 节点名称

我找不到很多关于它的信息,即使在 jQuery 页面上也是如此,所以希望有人能完成上述列表。

编辑:

这些可能会有所帮助:selfHTML node propertiesselfHTML HTML properties

【问题讨论】:

    标签: events properties jquery


    【解决方案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
    

    【讨论】:

    • 据我所知,chrome 在使用 console.log 时不再像这样打印 DOM 元素。您必须改用 console.dir。
    • 是的,还不错!
    【解决方案2】:

    event.target 返回 DOM 元素,因此您可以检索任何具有值的属性/属性;因此,为了更具体地回答您的问题,您将始终能够检索nodeName,并且您可以检索hrefid,前提是元素具有 一个href 和@987654326 @已定义;否则将返回undefined

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

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

    【讨论】:

    • 啊。谢谢!我正在添加显示可用属性的链接。
    • “this”是指“foo”还是“event.target”?如果我正在收听 document 上的 scrollStart 并且在 H1 元素上触发了 scrollStart,我该如何抓取 H1?
    • @frequent - Richards 下面的回答表明您可以通过查看 event.target.tagName 找到 H1
    【解决方案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()`
    

    【讨论】:

    • 姓名...为​​什么除了你之外没有人说出这个简单的答案?
    【解决方案4】:

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

    我尝试过使用 jQuery

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

    返回错误:

    .attr 不起作用

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

    【讨论】:

    • 那是因为e.target不是jQuery对象,.attr()是jQuery的方法。如果你想试试__target.getAttribute('href'); 就可以了。
    【解决方案5】:

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

    【讨论】:

      【解决方案6】:

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

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

      【讨论】:

      • 值得一提的是,这个面板现在已被弃用,取而代之的是 console.dir。在 Chrome 85 上
      【解决方案7】:

      如果要获取属性值

      event.target.getAttribute('attribute name')
      

      【讨论】:

        【解决方案8】:
        //Do it like---
        function dragStart(this_,event) {
            var row=$(this_).attr('whatever');
            event.dataTransfer.setData("Text", row);
        }
        

        【讨论】:

        • 这个问题已经得到解答,很多人都对这些答案投了赞成票。你的答案在哪方面更好?您能解释一下您的解决方案吗?
        猜你喜欢
        • 2011-11-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-01-22
        • 1970-01-01
        相关资源
        最近更新 更多