如何把多个js函数绑定到事件上面
文章目录[隐藏]
在给网页加一些特效时,经常要加入“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;- 打赏
- 微信
- 支付宝
