js给onload事件添加方法

2026-09-07

JavaScript 中 onload 事件绑定多个方法的优化建议

页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = functionName 调用这些方法.需要调用多个方法时,若使用 window.onload = functionA; window.onload = functionB;,它们之中只有最后一个方法会被实际调用.那么应如何实现调用多个方法呢? 直接在 HTML 中编写: <body onload="

JS三个事件绑定方法

1. JS三个事件绑定方法 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法. <button onclick = "alert('hello world')">click me!</button> 2.在html标签上写入事件类型,在js上写事件处理方法. html部分 <button onclick = "sayHello()">click me!</button> js部分

JS之ONLoad事件

如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧例1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="tex

[JS]给String对象添加方法,使传入的字符串字符之间以空格分开输出

看到一个这样子的面试题: 给String对象添加一个方法,传入一个string类型的参数,然后将string的每一个字符间加空格返回,例如:addSpace("hello world") //->'h e l l o w o r l d'. 第一眼看这道题目觉得出的很有问题, 既然给String中添加对象,调用方法应该是str.addSpace(),addSpace(str)是一个普通函数的调用方法吧! 请教了下别人,发现自己思维有点误区,直接就考虑到了给String原型添加对象

关于js中onload事件的部分报错。

当使用onload获取元素时,建议在onload事件之前定义需要获取的元素名称,在onload里面只执行获取操作,这样获取到的元素在后面才能顺利使用. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <ti

js共享onload事件

问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型的网页,可以直接用下面的代码绑定即可: window.onload = func; 二.在复杂的一些可以用: window.onload = function(){ func1(); func2(); func3(); } 在需要绑定的函数不太多的场合,这是最简单的解决方案. 三.对于复杂场合,则需

js window.onload事件

1.最简单的调用方式直接写到html的body标签里面,如: ? 1 2 3 4 <html> <body onload="func()"> </body> </html> 2. js语句调用 ? 1 2 3 4 <html> <body onload="func1();func2();func3();"> </body&g

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv

JavaScript 中 onload 事件绑定多个方法

当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处理函数的值存入变量 var oldOnload = window.onload; if (typeof window.onload != "function") { //如果这个处理函数还没有绑定任何函数,就像平时那样添加新函数 window.onload = func; } else {

javascript对象事件绑定方法

javascript对象事件绑定方法今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.onclick=p.click.call(作用域对象); 发现事件方法在初始化的时候就触发了,而且绑定失败. 正确的写法 ojb.onclick=function(){ p.click.call(作用域对象); }; 其实这里和作用域无关,还是绑定方法不对.所以总结了下js的对象事件绑定方法 1.内联模型

JS滚轮mousewheel事件和DOMMouseScroll事件

滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试,即使现在FireFox 19下,也是不识onmousewheel 一个最简单的使用差异(body滚动条由内部一定高div撑开): document.body.onmousewheel = function(event) { event = event || window.e

js动态添加onload、onresize、onscroll事件(另类方法)

js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加.也就是说,它只能这样来(以 onload 为例,下同): 代码如下: window.onload = function() { // ... }; 但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为 window.onl

js添加事件通用方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签,绑定了2个弹出事件</p>

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:1.加载多个函数的问题<body onload="a();b();"></body>在Onload事件中只能这样加载,很丑陋…而在J

（转载）JS事件监听 JS:attachEvent和addEventListener使用方法

(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> <title>JS</title> </head> <body> <input id="para" type="text"/> <script> function test() { alert(&

【JS】怎样同一时候处理多个window.onload事件

有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(window.onload!=null){ eval("theOldFun="+window.onload.toString()); window.onload=function(){theOldFun();addReadResource();}; } eval()函数的作用: 它的功能是把相

JS ready和onload事件比较分析

页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 故理解: 一般样式控制的,比如图片大小控制放在onload 里面加载; 而:jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: $(function(){ // do something });其实这个就是j

onload事件属性，JQ中的load,ready方法

onload事件属性,JQ中的load,ready方法前言页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事件可以帮助我们在资源准备就绪后,再开始进行相关的操作.接下来我们就原生JS的事件属性onload,JQ中的load,ready方法进行一些讨论. onload HTML onload事件属性,常用在<body>中,一旦完全加载所有内容(包括图像,脚本文件,CSS文件等),就执行一段脚本. 以下内容

通过原生JS实现为元素添加事件

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

js给onload事件添加方法

热门专题