`
trarck
  • 浏览: 28728 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

onresize事件

    博客分类:
  • js
阅读更多
onresize的定义方式
一、直接在html中定义
    如<body onresize="doResize()"/>
二、直接给onresize赋值
    可以给window和body的onresize赋值
    如window.onresize=function(){},document.body.onresize=function(){}
三、使用事件监听
    只对window有作用
    如window.addEventListener("resize",fn);
说明:
    1、直接给onresize赋值会覆盖在html中定义。
    2、直接给onresize赋值,window,body只有一个起作用,后定义的会覆盖先定义的
    3、事件监听只对window有效,可以其它方式同时触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title> new document </title>
  <style>html,body{border:5px solid #06F;}</style>
 </head>

 <body onresize="a();">
   <div id="show">0</div>  
   <div id="div" style="border:1px solid #000"></div>  
   <textarea id="re" cols="30" rows="6"></textarea> 
    <script>  
    var re=document.getElementById("re");
     //同时定义body与window的onresize
     //ff下window上的启作用,ff下,用js定义在body上不启作用
     //ie chrome opra下 根据body与window定义的先后顺序 后定义的覆盖先定义的

     //在任意浏览器下,js定义的会覆盖在标签上直接定义的onresize事件。
	 
     document.body.onresize=function () {
        re.value+='this is body js resize.\n';
     }
     window.onresize=function () {
        re.value+='this is window resize.\n';
     } 
    
     //使用listener监听事件只能在window上,在body上无效。
     bind(document.body,"resize",function(){
        re.value+='this is body  resize in litener.\n';
     });
     bind(window,"resize",function(){
        re.value+='this is window  resize in litener.\n';
     });
     function a() {
         re.value+=("this is body html resize\n");
     }
    //任意html元素,改变内容,是否触发onresize,则只有ie下启作用
    var i = 0;  
	var div=document.getElementById("div");
	var show=document.getElementById("show");
    div.onresize = function(){ show.innerHTML = ++i; }  
    setTimeout('div.innerHTML="test"', 1000)  
    setTimeout('div.style.height="50px"', 2000)  ;
   
   function bind(el,eventName,fn) {
        if (window.addEventListener) {
            el.addEventListener(eventName, fn,false);
        } else if (window.attachEvent) {
                el.attachEvent("on" + eventName, fn);
        } 
   }
   </script>  
 </body>
</html>
分享到:
评论

相关推荐

    [JavaScript]解决页面onresize缩放时多次调用的问题.doc

    然而,在JavaScript中,尤其是对于老旧的IE浏览器(如IE8),直接绑定onresize事件可能导致频繁调用,甚至引起浏览器假死。这是因为每次窗口尺寸变化时,resize事件都会被立即触发,这在处理大量数据或复杂操作时尤...

    浅谈javascript属性onresize

    JavaScript中的onresize事件是一个非常实用的属性,它可以监测并响应浏览器窗口大小的调整。在我们进行响应式网页设计或者需要根据浏览器窗口大小调整某些元素尺寸时,onresize事件就显得尤为重要。 首先,我们要...

    JavaScript页面事件.pdf

    案例2演示了如何在onresize事件中固定浏览器窗口的大小,使得无论用户如何尝试改变窗口尺寸,它都会自动恢复到预设的宽度和高度。 这些JavaScript事件为开发者提供了丰富的交互性选项,使网页能够根据用户行为和...

    js实现浏览器窗口大小被改变时触发事件的方法

    这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器窗口大小改变时触发事件的功能。以下是关于这一知识点的详细解析。 首先,我们了解window对象。在浏览器中,window对象表示一个...

    [js]javascript事件集合(包有触发事件).pdf

    onmove和onresize事件 `onmove`事件在窗口移动时触发,`onresize`事件在窗口或元素尺寸改变时触发。 #### 9. onscroll事件 `onscroll`事件在元素的滚动条被滚动时触发。经常用于长页面中。 ```javascript ...

    Delphi让窗体控件随窗口大小而变化..rar

    首先,了解窗体的OnResize事件是关键。当窗体尺寸发生变化时,系统会触发这个事件。我们可以在OnResize事件处理函数中编写代码,使控件的位置和大小相应地更新。例如: ```delphi procedure TForm1.FormResize...

    动态设置Memo控件边框的大小,Delphi代码..rar

    1. 创建一个事件处理函数,例如 OnResize 事件,当 Memo 控件大小改变时自动调整边框宽度。 ```delphi procedure TForm1.Memo1Resize(Sender: TObject); begin // 在这里写入调整边框的代码 end; ``` 2. 在该函数...

    一个类似于QQ的自动伸缩窗体

    Delphi中的TForm有一个OnResize事件,可以在窗体大小改变时被触发。我们可以通过编写OnResize事件处理程序来动态调整窗体内容的位置和大小。 2. **使用布局管理器**:Delphi的VCL库提供了几种布局管理器,如...

    Delphi窗口放大效果

    Delphi中的每一个Form都有一个OnResize事件,当窗口大小发生变化时,这个事件会被触发。开发者可以在事件处理函数中编写代码,根据新的窗口尺寸重新计算和设置控件的位置和大小,从而实现平滑的放大效果。 3. **...

    Delphi实现控件拖动及改变大小

    1. **OnResize事件**:Delphi中的控件有OnResize事件,可以在控件大小变化时执行特定的代码。例如,你可以在这个事件中调整子控件的位置和大小,以保持界面布局的合理性。 2. **使用Sizing样式**:通过设置控件的...

    delphi自动根据窗体大小缩放控件大小

    3. **利用Form的OnResize事件**:你可以编写一个`OnResize`事件处理程序,当窗体尺寸变化时,根据新的窗体尺寸调整控件的大小。这通常涉及计算新的控件宽度和高度,然后设置它们的`Width`和`Height`属性。 4. **...

    asd.rar_delphi 吸附_窗口

    2. **OnMouseMove和OnResize事件**:这两个事件在用户移动或调整窗口大小时触发,是实现吸附功能的关键。在OnMouseMove事件中,我们可以检测鼠标位置,判断是否接近其他窗口的边缘;在OnResize事件中,我们可以更新...

    winform圆角框和窗体最大化问题

    在Windows Forms中,OnResize事件在窗体大小改变时被触发,包括窗体被最大化或最小化。开发者在第104行到108行的OnResize方法中对logo图片的位置进行了处理。在注释掉这部分代码后,logo居中显示;然而,当这部分...

    控件随winform窗体缩放

    在OnResize事件处理程序中,我们可以遍历窗体上的所有控件,并根据窗体的新尺寸计算出每个控件的新位置和大小。 ```csharp protected override void OnResize(EventArgs e) { base.OnResize(e); foreach ...

    MDI.rar_MDI_delphi MDI

    当MDI子窗口被最大化时,OnResize事件会被触发,此时可以在此事件处理程序中控制重绘行为。为了避免闪烁,可以在最大化过程中暂时禁用窗口的自动重绘,等窗口调整完毕后再恢复。 其次,利用BeginUpdate和EndUpdate...

    控件隧窗体大小的变化而改变

    例如,我们可以创建一个自定义的CSizeChange类,该类继承自Form或Control,并重写OnResize事件处理函数。在OnResize事件中,我们可以根据窗口的新尺寸计算每个控件的新位置和大小,以确保它们的相对位置保持不变。 ...

    C++builder中控件随窗体尺寸变换而变换尺寸位置类

    在"对话框缩放"示例中,可能包含了一个类,该类继承自标准控件,重写了OnResize事件处理函数。在这个函数中,类会遍历所有子控件,根据预先设定的规则(如锚点、比例等)来调整它们的大小和位置。这样的设计使得在...

    CBUILDER应用程序的界面跟随不同分辨率而改变[文].pdf

    本文将详细介绍如何在CBUILDER中通过OnResize事件来动态调整控件的位置和大小,以便于在不同分辨率下保持良好的界面布局。 CBUILDER和Delphi中的Form控件具有一个名为OnResize的事件,当Form的尺寸发生变化时,例如...

    Delphi限制窗体大小源码实例..rar

    1. **OnResize事件**: Delphi中的窗体具有`OnResize`事件,当窗体尺寸发生变化时,会触发此事件。在事件处理函数中,你可以添加代码来检查并调整窗体的新尺寸,以确保它始终在指定的最小和最大尺寸范围内。例如: ...

    仿QQ自动伸缩的窗口,用Delphi写的..rar

    1. **窗体大小调整事件**:Delphi中的窗体对象提供了OnResize事件,当窗体尺寸发生变化时,这个事件会被触发。开发者可以通过编写OnResize事件处理程序来动态地调整窗体内的控件位置和大小,以实现窗口的伸缩效果。 ...

Global site tag (gtag.js) - Google Analytics