今天在學習其他人代碼的時候見到了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