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

1、将 event(e) 作为函数的参数，其中这个 event 代表的是“事件对象”，并且 event 拥有属性和方法，如：

html代码：

点我

js代码：

var btn = document.getElementById("btn");
btn.onclick = function(event){
    console.log(event.type)     //获取事件类型
    console.log(event.target)     //获取事件源
    console.log(event.target.nodeName)    //获取触发事件的DOM元素
}

结果.png

（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）CSS代码：

ul li{ width:100px; float:left; height:30px; line-height:30px; text-align:center; background:#9cf; margin-left:1px; list-style: none;}
ul li a{ /*display:block;*/ color:#fff; text-decoration: none;}

（2）JS代码：

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

（3）HTML代码：

    
菜单一
    
菜单二
    
菜单三
    
菜单四
    
菜单五
    
菜单六

点击a元素的结果.png

点击li元素的结果.png