window.addEventListener来解决让一个js事件执行多个函数_javascript技巧

可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决一下。

下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。

复制代码 代码如下:

if (document.all){
window.attachEvent('onload',函数名)//IE中
}
else{
window.addEventListener('load',函数名,false);//firefox
}

在近来的工作中,用到了attachEvent方法,该方法可以为某一事件附加其它的处理事件,有时候可能比较有用,这里将其基本用法总结一下。

其语法可以查看《DHTML手册》,里面有详细的说明,这里贴一个例子,该例子来自互联网:

复制代码 代码如下:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行

写成这样

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

时间: 2024-10-21 07:51:07

window.addEventListener来解决让一个js事件执行多个函数_javascript技巧的相关文章

封装了一个js图片轮换效果的函数_javascript技巧

其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>图片轮换效果</title> <style type="t

一个js过滤空格的小函数_javascript技巧

过滤空格,尤其是在一些注册页面比较实用,可以用js在客户端将空格过滤掉,在提交服务器入库 复制代码 代码如下: <html> <head> <title>过滤空格</title> <SCRIPT LANGUAGE="JavaScript"> var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.jb51.net');

js友好的时间返回函数_javascript技巧

本文实例为大家分享了js显示友好时间的函数代码,供大家参考,具体内容如下 //友好的时间返回函数(如:10分钟前)time_stamp为UNIX秒数 function friendly_time(time_stamp) { var now_d = new Date(); var now_time = now_d.getTime() / 1000; //获取当前时间的秒数 var f_d = new Date(); f_d.setTime(time_stamp * 1000); var f_tim

一个JS的日期格式化算法示例_javascript技巧

复制代码 代码如下: function dateFormat(date, format) { var o = { "M+": date.getMonth() + 1, //month "d+": date.getDate(), //day "h+": date.getHours(), //hour "m+": date.getMinutes(), //minute "s+": date.getSeconds

js时间日期格式化封装函数_javascript技巧

js虽然提供了各种获取时间Date对象的不同属性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是却没有像java那样提供一个方法来供用户来根据自身提供的模板(pattern),来格式化指定时间对象,所以自己就封装了一个小方法,只供大家闲来调侃-.-,有好的建议还望慷慨指荐哦. 用到知识点: arguments:该对象代表正在执行的函数和调用它的函数的参数.不可显式创建,虽然有length属性,且能像数

js 调整select 位置的函数_javascript技巧

 //   排序:向上移动      function   Up()      ...{        var   sel=document.getElementById("selectCheck");  //获取select      var   nIndex   =   sel.selectedIndex;   //需要进行操作的select 项的索引      var   nLen   =   sel.length;   //select 总共项目数      if   ((nL

JS 终止执行的实现方法_javascript技巧

(一)在function里面 (1)return; (2)return false; (二)非function方法里面 alert("before error."); throw SyntaxError(); alert("after error.");

js打造数组转json函数_javascript技巧

代码很简单,这里就不多废话了,直接奉上: 复制代码 代码如下: function arrayToJson(o) {         var r = [];         if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "

javascript-js点击某一个链接交替执行两个函数(js实现网页全屏问题)

问题描述 js点击某一个链接交替执行两个函数(js实现网页全屏问题) 想实现的需求:1.网页上有个"全屏显示"按钮(链接),点击全屏后执行函数fullScreen(),然后"显示全屏"二字变成"退出全屏":2.点击"退出全屏"执行函数exitFullScreen(),然后"退出全屏"变为"全屏显示" function fullScreen() { var el = document.do