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

如何把多个js函数绑定到事件上面

2017-12-29 11:59 489 查看

为什么需要绑定事件和多个事件

在给网页加一些特效时,经常要加入“onload”事件，即在网页加载完后执行某事件，例如：
<body onload=”alert(‘欢迎光临!’)”
，但这样做有个大的缺陷，事件会在网页完全下载完后才会执行，包括网页中的静态资源（图片或Flash等），如果网页中的图片比较大或有很多图，可能还没等网页完全下载完网友已经点击链接到其它网页去了，这样这个事件就没有执行了。

这时我们会想到用“window.onload”或“document.body.onload”来替换
<body>
中的onload事件，的确问题解决了，但在
加载多个onload事件时或控制加裁顺序时还会出现一些问题
，还有一个问题就是当使用window.onload时，后面的赋值可能会将前面的覆盖掉，导致前面的绑定方法不能够运行，直到我发现“Paul Koch”写的addLoadEvent()函数后，所有问题都解决了。在这篇文章里，我们将会详细说明该方法并进行自己的延伸使用。

1.事件和方法的区别

事件
：指的是一个类有可能会引发的一个调用，任何类都可以向一个有事件的类注册这个事件的监听，那么当事件引发时，类就会受到事件通知，从而响应。在javascript中，所有的事件都是通过函数来执行的,函数本身即是动作(针对事件来说)，也是方法(针对对象来说)！对象是指的谁触发了事件，绑定事件的主谋。

事件就如神经开关，刺激激发动作函数，只需交互一瞬间； 比方：“针刺皮肤，神经刺激敏感”就是一个事件。

方法
：指的是一个类的一些操作，比如一个Car类他有一个Move的移动方法，表示这个车子可以移动的操作（Operation）。函数方法就是对事件作出具体反馈映射，即执行处理某种事件的动作，需要一段执行过程。比方：“针刺皮肤，激发反馈，立刻躲闪”躲闪动作就是函数方法。

故，所有的函数动作本身都是静态的，不会自我运行，必须借用外力即事件刺激激活调用才可运行。

即，函数动作必须与事件绑定才有意义，函数与事件二者是息息相关，相依为命的，才能称之为完整是动作。

总，函数动作必须有事件激发调用。

对于BOM对象可有方法和事件，其区别在于：

1.事件名前一般都以on开头。
2.方法是程序员写语句直接调用，即显式调用；事件不需程序员调用，但是，必须由程序员写一个函数且将该函数赋值给相应的事件，其调用是在相应的事件触发时。


2. 将方法绑定到事件上

假如我们希望某个函数在网页加载完毕之后就立即执行。网页加载完毕时会触发一个onload事件，所以我们可以利用onload事件来加载这个函数。Onload事件与window对象相关联。

2.1 js中最常使用的绑定

把myfunction函数绑定到这个事件上：

window.onload = myfunction();


如上面所示，一个函数我们可以利用上面的解决,那两个、三个甚至更多呢？怎么解决？？

2.2如何实现多个方法的绑定

假如我们有firstFunction和secondFunction两个函数，是不是就是下面这样写呢：

window.onload = firstFunction;
window.onload = secondFunction;


但是每个处理函数只能绑定一条指令。所以上面所说名的代码不能实现我们的思路。因为secondFunction函数将会取代firstFunction函数。

有一种办法可以帮助我们解决上面问题：即我们先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下：

window.onload = function(){
firstFunction();
secondFunction();
}


这确实是一个好的、简答的能解决简单问题的方法。

但是其实还存在问题，那就是我们可能不是静态的去加载这些函数，也不能确定这些函数什么时候添加，那么就可以看看下面的这个解决方案——不管你打算在页面加载完毕后要执行多少个函数，利用该函数都可以轻松的实现。

该函数名为addLoadEvent。该函数仅一个参数：该参数指定了你打算在页面加载完毕后需要执行的函数的函数名。

addLoadEvent()函数代码如下：

function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}
else{
// window.onload是一个对象，进行添加匿名方法
window.onload = function(){
oldonload();  //执行之前的onload方法
func();  //执行当前添加的onload
}
}
}


addLoadEvent函数主要是完成如下的操作：

1、把现有的window.onload事件处理函数的值存入到oldonload中。
2、如果在这个处理函数上还没有绑定任何函数，就将该函数添加给它。
3、如果在这个处理函数上已经绑定了一些函数，就把该函数追加到现有指定的末尾。


通过addLoadEvent函数，只需要调用该函数就可以进行绑定了。如下面所示代码：

addLoadEvent(firestFunction);
addLoadEvent(secondFunction);


所以这个函数非常有用，尤其当代码变得很复杂的时候。无论你打算在页面加载完毕时执行多少个函数，只需要多写几条这样的语句就可以解决了。方便、实用。

2.3如何对其他事件进行绑定

从上面结果我们能够得出，当我们需要对其他事件进行绑定方法时，可以采用同样的原理进行绑定，如下面代码，我们进行onresize事件方法的绑定：

function addOnresize(func) { //func是要添加的方法
var oldOnResize = window.onresize; //window事件对象
if (typeof window.onresize !== 'function') { //判断是否是一个方法，在这里要说明的是window.onresize在赋值之前是一个object，赋值方法之后是一个function
window.onresize = func; //如果不是方法就给对象赋值
} else {
window.onresize = function () {
oldOnResize(); //调用上一次状态的方法
func(); // 调用新增的方法
}
}
}


如上面代码，我们能够这种模式进行添加任意方法，然后在其他地方使用，也就是说当我们使用时并不会将其他地方绑定的方法覆盖掉，而是先调用其他地方的方法，然后再调用自己添加的方法。

3. Js window 常用事件 event

//事件加载完后立即发生

window.onload = function onLoad() {
alert("onload");
}


//用户退出页面时发生,事件在用户退出页面时发生。

window.onunload = function onUnLoad() {
alert("onunload");
}


//刷新或关闭时调用

window.onbeforeunload = function onBeforeUnLoad() {
alert("onbeforeunload");
}


//是判断当前页面是否活动

window.onactivate = function onActivate() {
alert("onactivate");
}


//

window.onbeforedeactivate = function onBeforeDeactivate() {
alert("onbeforedeactivate");
}


//ctrl+滚动时触发

window.oncontrolselect = function onControlSelect() {
alert("oncontrolselect");
}


//滚动

window.onscroll = function onScroll() {
alert("onscroll");
}


window.onresizestart = function onResizeStart() {
alert("onresizestart");
}
//
window.onresizeend = function onResizeEnd() {
alert("onresizeed");
}//


//控件有效/无效
document.forms[0].controlName.disabled=false/true;


–end–
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航