javascript中的事件

摘要: 关于javascript中的事件，最近有点小的研究，下面是我写的我自己的体会。

在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>

上面是一个卫元素添加自定义事件并自动触发的一个例子。这边的自动执行其实怎么说呢我现在也还不明白，添加自定义事件有什么好处，可能是为了装逼吧，但是也不好说。