在web前端js中，页面上的交互很多都是基于事件来进行的，针对于事件，我们使用的方法也很多，比如说： <script type="text/javascript"> function click
在web前端js中，页面上的交互很多都是基于事件来进行的，针对于事件，我们使用的方法也很多，比如说：
<script type="text/javascript"> function clickEvent () { alert(123); }</script><a href="javascript:;" onclick="clickEvent()"> click me</a>又比如说这样：
<a href="javascript:;" id="btn_click"> click me</a><script type="text/javascript"> var btn = document.getElementById('btn_click'); btn.onclick = function () { alert(123); }</script>再比如天剑事件监听的方式，如下所示：
<a href="javascript:;" id="btn_click"> click me</a><script type="text/javascript"> var btn = document.getElementById('btn_click'); btn.addEventListener('click', function () { alert(123); }, true);</script>当然也有别的方法，比如说使用jquery 的onClick（function（）{}）,或者是低版本的jquery 中的live，bind，高版本的中的on等等。前面的几种方法比较简答，我今天没事儿干，就好好的看了看添加事件监听的方法。感觉这个事件监听的方法挺牛逼的。就记录一下自己的学习体会。可能有些地方不是很好。
其中addEventListener()这个方法中有三个参数，第一个是name，也就是我们要添加的事件的名称，第二个就是是个回调函数，第三个参数是一个布尔类型，表示是否捕获在冒泡阶段执行。这个函数的兼容性是有限的，针对于ie8及以下是不适用的，opera也不适用，但是ie8 及以下，我们可以使用另外的一个函数，就是attachEvent()这个函数，后面再说这个函数。
看这个函数，addEventListener的第一个函数既然是事件的名称，那么都有多少种呢，我也没有找到相应的答案，但是在jquery种是这样写的，
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { // Handle event binding jQuery.fn[ name ] = function( data, fn ) { return arguments.length > 0 ? this.on( name, null, data, fn ) : this.trigger( name ); };});其中上面的则实是要添加的事件监听。上面的事件基本上只要浏览器内部存在的，添加监听，就会实现，但是我们还经常见到一些自定义的事件。我们应该如何去进行自定义事件呢。
<script type="text/javascript"> indow.onload = function(){ var a = document.getElementById("aaa") var b = document.getElementById("bbb") var c = document.getElementById("ccc") a.addEventListener("cat", function(e) { console.log(e.xxx) }) b.addEventListener("cat", function(e) { console.log(e.detail) ;e.stopPropagation(); }) c.addEventListener("cat", function(e) { console.log(e.detail) }) var event = document.createEvent( "CustomEvent"); event.initCustomEvent( "cat", false,true,1 );//false 改成true看看 event.xxx = { aa:"11" } a.dispatchEvent(event); }</script>下面是HTML结构 :<div id="ccc" > <div id="bbb" > <div id="aaa" > AAA </div> </div></div>上面是一个卫元素添加自定义事件并自动触发的一个例子。这边的自动执行其实怎么说呢我现在也还不明白，添加自定义事件有什么好处，可能是为了装逼吧，但是也不好说。
