浅谈jQuery/JS函数中的event（e）、element、this、event.target、event.currentTarget、tagName、nodeName...

1、将event（e）作为函数的参数，其中这个event代表的是“事件对象”，并且event拥有属性和方法，比如：
（1）获取事件类型：event.type，得到的值可能是click等
（2）获取事件源：所谓事件源就是发生事件的元素，event.target
（3）获取触发事件的DOM元素：event.target.nodeName，得到的是具体的元素的名称，如LI、A等

2、将element作为参数传入函数，如jQuery中的each函数，其中的element代表当前的元素，也可以使用this选择器
$('ul li').each(function(index, element){
  $(element).bind('click', function(event){
    //......
  });
});

3、event.target、event.currentTarget和this的区别：由于JS中的事件是会冒泡的，所以this是可以变化的，但event.target是不会变化的，它永远指向触发事件的DOM元素本身，而event.currentTarget指向绑定事件的DOM元素

4、tagName和nodeName的区别：首先DOM里有5个比较重要的节点类型（元素、属性、文本、注释、文档，对应的节点类型值nodeType分别是1、2、3、8、9），tagName和nodeName语义上是一样的，但是：
（1）tagName只能用于元素节点
（2）nodeName可以用于任何节点，比如元素节点、属性节点、文本节点等
（3）从DOM层次来看，nodeName是node 接口上的property，而tagName是element接口上的property，所有的节点（元素节点，属性节点，文本节点等12种）都继承了node接口，而只有元素节点才继承了element节点，因此nodeName比tagName具有更大的使用范围。

5、例子：

（1）样式代码：
ul li{ width:100px; float:left; height:30px; line-height:30px; text-align:center; background:#9cf; margin-left:1px;}
ul li a{ /*display:block;*/ color:#fff;}

（2）JS代码：
$(function(){
  $('ul li').each(function(index, element){
    $(element).bind('click', function(event){
      //事件对象
      alert("event：" +event);//[object Object]
      
      //返回哪个DOM元素触发了事件
      alert("element：" +element);//[object HTMLLIElement]
      alert("this：" +this);//[object HTMLLIElement]
      alert("event.currentTarget：" + event.currentTarget);//[object HTMLLIElement]
      alert("event.target：" + event.target);//注意这里，如果点击的是a链接，则输出javascript:;，如果点击的是li则输出[object HTMLLIElement]
      
      //事件类型
      alert("event.type：" +event.type);//click
      //节点名称（从下边三句代码的输出结果可以看出this和event.currentTarget的作用是相似的）
      //获取具体的触发事件的DOM元素的节点名称
      alert("event.target.nodeName：" +event.target.nodeName);//上文说道event.target是不会变化的，永远指向触发事件的元素，所以当你点击的是a标签时输出的是"A"，当你点击的是li标签时输出的是"LI"
      alert("event.currentTarget.nodeName：" +event.currentTarget.nodeName);//由于JS中事件会冒泡，所以无论你点击的是a标签或是li，输出的值都是"LI"
      alert("this.nodeName：" +this.nodeName);//由于JS中事件会冒泡，所以无论你点击的是a标签或是li，输出的值都是"LI"
      //节点类型
      alert("event.target.nodeType：" +event.target.nodeType);//由于这里点击的a或li都是元素节点，因此会输出"1"
      
      //触发事件的节点ID
      alert("event.target.id：" +event.target.id);
      
      //触发事件的节点className
      alert("event.target.className：" +event.target.className);
      
      //触发事件的元素的内容
      alert("event.target.innerHTML：" +event.target.innerHTML);
      var d = document.getElementById("btn").getAttributeNode("name");
      alert(d.nodeType);
      alert(d.nodeName);
      alert(d.nodeValue);
    });
  });
});

（3）HTML代码：

<ul>
    <li><a href="javascript:;" class="btn" id="btn" name="菜单一">菜单一</a></li>
    <li><a href="javascript:;" class="btn">菜单二</a></li>
    <li><a href="javascript:;" class="btn">菜单三</a></li>
    <li><a href="javascript:;" class="btn">菜单四</a></li>
    <li><a href="javascript:;" class="btn">菜单五</a></li>
    <li><a href="javascript:;" class="btn">菜单六</a></li>
</ul>