2014-02-26_javascript_event

监听事件:

addEventListener(type,callback,useCapture);

removeEventListener(type,callback,useCapture);

添加:

var button=document.getElementById("createButton");

button.addEventListener("click",function(){/* ... */},false);

移除事件监听:

var div=document.getElementById("div");

var listener=function(event){/* ..*/};

div.addEventListener("click",listener,false);

div.removeEventListener("click",listener,false);

1、如果事件监听的处理函数是匿名函数,那么只有在元素销毁时才会移除此事件;

2、绑定事件的第三个参数为事件的处理方式true:捕获,即当事件触发时回调函数的执行顺序父元素事件处理函数-->子元素事件处理函数;false时为我们通常所用的事件冒泡。

3、当事件冒泡时可以通过event.stopPropagation()函数来终止冒泡(传播);

4、浏览器同样给事件赋予了默认行为(checkbox选中,链接等),在事件传播阶段(之后)会触发这些默认行为。可以通过调用event.preventDefault()函数来阻止默认行为,同样也可以在回调函数中return false来阻止。

委托事件:

从事件冒泡开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件,用来减少应用中事件监听的数量。

//在ul列表上做事件委托

list.addEventListener("click",function(){

    if(e.currentTarget.tagName==="li"){

        /*do something*/

        return false;

    }

},false);

 

JQuery:

//不要这样做,这样会给每个li元素都添加了事件监听(非常浪费)

$("ul li").click(function(){/*...*/})

$("ul").delegate("li","click",function(){/*...*/});

1、使用事件委托的好处是,所有为元素动态添加的子元素都具有事件监听。

自定义事件:

//绑定自定义事件

$(".class").bind("refresh.widget",function(){/*...*/});

//触发自定义事件

$(".class").trigger("refresh.widget");

 

//From O'Reilly

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章