1、将 event(e) 作为函数的参数，其中这个 event 代表的是“事件对象”，并且 event 拥有属性和方法，如：
html代码：
<button id="btn" onclick="clickFn()">点我</button>
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代码：
<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>
点击a元素的结果.png
点击li元素的结果.png
