zoukankan      html  css  js  c++  java
  • event.target

      今天在学习其他人代码的时候见到了event.target.nodeName,event.target.dataset。刚开始是一头雾水,便google一下。发现大多数给出的词条都是有关jQuery事件中的target属性,半天也没有找到js中event.target到底还有哪些用法。找着找着就觉得自己怎么这么傻。。for in 一下自己找不就好了。。代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <meta charset="utf-8">
     6 </head>
     7 <body>
     8     <button id="btn" class="aichihuamei">爱吃话梅</button>
     9     <script type="text/javascript">
    10         var $ = function(id){
    11             return document.getElementById(id);
    12         }
    13         $("btn").onclick = function(event){
    14             for(var i in event.target){
    15                 console.log(i+"-------"+event.target[i]);
    16             }
    17         }
    18     </script>
    19 </body>
    20 </html>

    点击按钮,在控制台中就可以看到event.target的很多属性和方法。我在下列的图中圈出了一些,相信这些不需要详细解释,对应上方代码就可以看出来要怎么使用(哈哈,又多了一种方法)

    这次遇到的问题有两个点

    一:tagName所对应的要大写;

    二:dataset的使用

      这是个非常神奇的东西,先看代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <meta charset="utf-8">
     6 </head>
     7 <body>
     8     <button id="btn" data-a="a" data-b="b" data-c-d-e="cde" class="aichihuamei">爱吃话梅</button>
     9     <script type="text/javascript">
    10         var $ = function(id){
    11             return document.getElementById(id);
    12         }
    13         $("btn").onclick = function(event){
    14             for(var i in event.target){
    15                 console.log(i+"-------"+event.target[i]);
    16             }
    17             console.log(event.target.dataset.a);//a
    18             console.log(event.target.dataset.b);//b
    19             console.log(event.target.dataset.cDE);//cde
    20         }
    21     </script>
    22 </body>
    23 </html>

    代码修改的部分已用黄色标出,在标签中加入data-sth,当触发某个事件的时候,可以通过event.target.dataset.sth找到,注意两点,在输入时要忽略"-",除了第一个"-"后的名称,以后的名称都要大写,除了事件调用dataset,还用一种HTMLElement.dataset的用法,其他更多的理解,可以参考以下两篇文章:

    https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

    http://blog.csdn.net/yh0205039/article/details/51003317

     

  • 相关阅读:
    Flex通过Blazeds利用Remoteservice与后台java消息推送
    flex 实时更新的一些方法总结
    想让领导放权,就先让领导放心(深度好文)
    教师表(TEACHER.DBF)
    Delphi中基本控件之SaveDialog控件的使用总结
    Delphi实现类的持久化保存(DFM格式)
    人事中的BP是什么意思?
    从HR 到SBP其实还有很长的一段路要走
    在DBGrid中,按ctrl+Delete不让删除,怎么实现
    delphi adoquery的post和UpdateBatch
  • 原文地址:https://www.cnblogs.com/aichihuamei/p/6417268.html
Copyright © 2011-2022 走看看