您的位置：首页 > Web前端 > JavaScript

javascript 事件相关使用总结01

2014-02-17 11:18 393 查看

javascript 事件相关使用总结01

这里总结一下js事件相关的经验。

addEventLinstener()介绍

注册事件最基础的函数是这个

target.addEventListener(type, listener[, useCapture]);


这个有一些可以注意的地方
1.第二个参数它需要的是一个实现了EventListener接口的对象。但是也可以传递一个函数，最常见的就是传一个匿名函数
2.第三个useCapture参数指明是事件传递是自下向上冒泡，还是从上到下传递。

先总结一下第一点的问题
最常见的用法

var btn01 = document.getElementById("btn01");
btn01.addEventListener("click", function() {
console.log(this);
});


或者

function func() {console.log("func");}

var btn01 = document.getElementById("btn01");
btn01.addEventListener("click", func);


前一种是传递匿名函数，后一种是函数名。有什么区别？

匿名函数无法用removeEventListener移出事件的注册。后者可以

var btn01 = document.getElementById("btn01");
btn01.addEventListener("click", func);
btn01.removeEventListener("click", func);


注意：需要移出的注册事件，addEventListener和removeEventListener的参数必须一样。

用匿名函数方式，每个匿名函数被看作一个独立的函数，即便匿名函数内容一样。
在下面这种情况下它比函数名方式更加占内存。

//对所有div注册一个点击事件
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
divs[i].addEventListener("click", function() {
func();
});
}


另外一个很重要的地方就是匿名函数方式每次注册都是独立的。例如

btn01.addEventListener("click", function() {
console.log(this);
});
btn01.addEventListener("click", function() {
console.log(this);
});


这样点击事件被看作两个有两个回调注册，会执行两次。

而后者函数名方式，则被看做是同样的回调注册。只注册一次，回调函数代码也只执行一次。

btn01.addEventListener("click", c);
btn01.addEventListener("click", c);


与jquery相关的问题。

如果用jquery注册的话，不管是不是匿名函数，每次注册都是生效的。例如

$(document).ready(function() {
$("#btn01").click(func);
$("#btn01").click(func);
});


func函数会执行两次。这个是和addEventListener方式不一样的地方之一。用jquery的时候这个问题还是很容易出现的。

EventListener接口的用法

只需要一个有handleEvent方法的对象即可。例如

var events = {
handleEvent : function(event) {
switch (event.type) {
case 'click':
//......
break;
case 'dbclick':
//......
break;
default:
break;
}
}
}
btn01.addEventListener("click", events, false);
btn01.addEventListener("dblclick", events, false);


这样点击和双击事件都会执行handleEvent方法，再根据event.type类型做不同的分支。
这种做法的好处就是更加面向对象一点，需要处理的数据可以由同一的对象管理。例如以下一个简单的例子

function BtnHandler(element) {
this.element = element;
this.name = "button";

this.handleEvent = function(event) {
switch(event.type) {
case 'click':
this.clickHandler(event);
break;
case 'dblclick':
this.dblclickHandler(event);
break;
}
};
this.clickHandler = function(event) {
console.log("clickHandler");
}
this.dblclickHandler = function(event) {
console.log("dblclickHandler");
}

element.addEventListener('click', this, false);
element.addEventListener('dblclick', this, false);
}
//注册
BtnHandler(btn01);


第二个点useCapture参数。

1.true为Capture方式，由外向里顺序执行。
2.false为Bubbling冒泡方式，由里向外冒泡。默认它是false

事件传递机制不多说了，有许多文章可以参考。 这里说说与它相关的有两个标准的接口。
stopPropagation和preventDefault
stopPropagation很简单就是阻止事件继续传递。
而preventDefault原本是用来标记事件被取消了的。但是注意preventDefault调用后事件仍然会继续传递。
我发现的preventDefault唯一的用处就在移动设备上。有一些移动设备会出现“点穿现象”，
例如一个div层在下面，上面再盖一个div层（只是位置上覆盖，DOM树结构不是上下级关系，排除事件冒泡的影响）。上层DIV响应点击事件后如果执行力从DOM树中移出的操作，这种情况下下面的DIV也会响应到click事件。
这个时候使用event.preventDefault()便可以避免这种“点穿影响”。但是注意preventDefault会像它名字一样阻止浏览器的默认行为。例如按钮的点击特效等。

旧方式注册事件注意点
1.直接html写的。

<button id="btn01" onclick="func();">btn01</button>
function func() {
console.log(this); //这里的this是全局的window
}


这种使用的比较少，但是要注意它的回调函数里面没有绑定this。也就是它回调里面的this指向全局的window

2. 属性方式的写法

btn01.onclick = function() {};


这种写法在一些浏览器上可能不支持。并且它只能为某一个事件添加一个回调。

btn01.onclick = func01;
btn01.onclick = func02;


这样的click事件只能注册最后一个回调函数。

ready onload介绍

onload的作用是指元素装载完成后的回调，一般用在body上和image上。并不是所有的元素都有这个回调，支持的元素有以下。

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

例如

<body onload="load();"><img onload="func();" src="xx" />


js代码中的一些内置对象也有此回调。例如image, window对象。例如

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

var image = new Image();

image.onload = function() {

console.log("img onload");

};

image.src = "1.jpg";

div01.appendChild(image);


一个要点是body上注册的onload事件会等待所有的资源加载完后执行。单个img里面的则是自己加载完就执行。

我们使用的时候往往用jquery的ready。这个更好用。

$(document).ready(function() {

}


有什么不同呢，

1.body onload会等待图片，静态文件等都加载完成之后执行。ready只是等dom树和js装载完（包含自执行的js代码执行完成）。

自执行的代码例子如下

<script>

(function() {

//......这里就是自执行的代码了，也就是一装载就开始执行。

})();

</script>


如果有耗时操作的话。例如下例。ready也是会等到这些执行完成后再响应。这一点需要注意一下。

(function() {

var sum = 0;

for (var i=0; i< 1000000; i++) {

sum += i;

}

console.log(sum);

})();


注意：不能用setTimeout或者异步代码来模拟耗时操作，概念不一样。

所以ready会比onload更早响应，并且使用也更加合理。我们只需要js和dom完了就可以写js代码逻辑来，不必要非要等图片等加载完。

2.onload注册多个回调不方便。用jquery的ready就不一样了（前面也提到过用jquery注册的，那怕是相同的函数也都会被单独执行）。

用onload多个回调函数写法这样，不是很方便。

<body onload="load();load2();load3();">


3.另外body的onload和jquery的ready不能同时使用，同时注册onload会不响应。

如果需要同时用到body的onload和ready的回调时机可以使用window的onload取代。它的响应时机跟body的onload差不多。并且window和body的onload同时注册body的也不响应。

(function() {

window.onload = function() {

console.log("window.onload");

};

})();


或者

$(document).ready(function() {

$(window).load(function() {

console.log("jquery window load");

});

});


事件委托处理

如果有动态的添加的dom元素或者说有许多相同的元素需要绑定同样的事件。则用事件委托则方便许多。
例如一个div里面动态添加了许多个button.

$(document).ready(function() {

var div01 = document.getElementById("div01");
for (var i=0; i<10; i++) {
var btn = document.createElement("button");
btn.innerHTML = "btn" + i;
btn.addEventListener("click", function() {
//.......
});
div01.appendChild(btn);
}
});


如果添加button的代码是某个程序运行中执行的。则上述方式有两个问题，第一注册事件代码需要添加按钮后执行，并且添加的内容可能根据不同情况而不一样，
这样可能会导致一些代码的重复而变得不好维护。

第二，更加占用内存。尤其如果使用的是匿名函数的方式注册的话。

事件委托就是利用事件冒泡，将事件注册到父元素上，这样就子元素不管是不是动态添加的，或者多少个都可以响应到。如果需要用到事件源则可以利用事件的event.target属性分辨出来那个元素。

div01.addEventListener("click", function(event) {
console.log(event.target.innerHTML);
});


这个有jqeury包装好的方法可用live()和delegate()
live是将事件绑定在DOM的根节点上。所以在任意时候使用

$("button").live("click", func);


delegate是将事件绑定在特定的父节点上所以使用的时候要指定父节点

$("div").delegate("button", "click", func);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航