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中,尤其是对于老旧的IE浏览器(如IE8),直接绑定onresize事件可能导致频繁调用,甚至引起浏览器假死。这是因为每次窗口尺寸变化时,resize事件都会被立即触发,这在处理大量数据或复杂操作时尤...
JavaScript中的onresize事件是一个非常实用的属性,它可以监测并响应浏览器窗口大小的调整。在我们进行响应式网页设计或者需要根据浏览器窗口大小调整某些元素尺寸时,onresize事件就显得尤为重要。 首先,我们要...
案例2演示了如何在onresize事件中固定浏览器窗口的大小,使得无论用户如何尝试改变窗口尺寸,它都会自动恢复到预设的宽度和高度。 这些JavaScript事件为开发者提供了丰富的交互性选项,使网页能够根据用户行为和...
这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器窗口大小改变时触发事件的功能。以下是关于这一知识点的详细解析。 首先,我们了解window对象。在浏览器中,window对象表示一个...
onmove和onresize事件 `onmove`事件在窗口移动时触发,`onresize`事件在窗口或元素尺寸改变时触发。 #### 9. onscroll事件 `onscroll`事件在元素的滚动条被滚动时触发。经常用于长页面中。 ```javascript ...
首先,了解窗体的OnResize事件是关键。当窗体尺寸发生变化时,系统会触发这个事件。我们可以在OnResize事件处理函数中编写代码,使控件的位置和大小相应地更新。例如: ```delphi procedure TForm1.FormResize...
1. 创建一个事件处理函数,例如 OnResize 事件,当 Memo 控件大小改变时自动调整边框宽度。 ```delphi procedure TForm1.Memo1Resize(Sender: TObject); begin // 在这里写入调整边框的代码 end; ``` 2. 在该函数...
Delphi中的TForm有一个OnResize事件,可以在窗体大小改变时被触发。我们可以通过编写OnResize事件处理程序来动态调整窗体内容的位置和大小。 2. **使用布局管理器**:Delphi的VCL库提供了几种布局管理器,如...
Delphi中的每一个Form都有一个OnResize事件,当窗口大小发生变化时,这个事件会被触发。开发者可以在事件处理函数中编写代码,根据新的窗口尺寸重新计算和设置控件的位置和大小,从而实现平滑的放大效果。 3. **...
1. **OnResize事件**:Delphi中的控件有OnResize事件,可以在控件大小变化时执行特定的代码。例如,你可以在这个事件中调整子控件的位置和大小,以保持界面布局的合理性。 2. **使用Sizing样式**:通过设置控件的...
3. **利用Form的OnResize事件**:你可以编写一个`OnResize`事件处理程序,当窗体尺寸变化时,根据新的窗体尺寸调整控件的大小。这通常涉及计算新的控件宽度和高度,然后设置它们的`Width`和`Height`属性。 4. **...
2. **OnMouseMove和OnResize事件**:这两个事件在用户移动或调整窗口大小时触发,是实现吸附功能的关键。在OnMouseMove事件中,我们可以检测鼠标位置,判断是否接近其他窗口的边缘;在OnResize事件中,我们可以更新...
在Windows Forms中,OnResize事件在窗体大小改变时被触发,包括窗体被最大化或最小化。开发者在第104行到108行的OnResize方法中对logo图片的位置进行了处理。在注释掉这部分代码后,logo居中显示;然而,当这部分...
在OnResize事件处理程序中,我们可以遍历窗体上的所有控件,并根据窗体的新尺寸计算出每个控件的新位置和大小。 ```csharp protected override void OnResize(EventArgs e) { base.OnResize(e); foreach ...
当MDI子窗口被最大化时,OnResize事件会被触发,此时可以在此事件处理程序中控制重绘行为。为了避免闪烁,可以在最大化过程中暂时禁用窗口的自动重绘,等窗口调整完毕后再恢复。 其次,利用BeginUpdate和EndUpdate...
例如,我们可以创建一个自定义的CSizeChange类,该类继承自Form或Control,并重写OnResize事件处理函数。在OnResize事件中,我们可以根据窗口的新尺寸计算每个控件的新位置和大小,以确保它们的相对位置保持不变。 ...
在"对话框缩放"示例中,可能包含了一个类,该类继承自标准控件,重写了OnResize事件处理函数。在这个函数中,类会遍历所有子控件,根据预先设定的规则(如锚点、比例等)来调整它们的大小和位置。这样的设计使得在...
本文将详细介绍如何在CBUILDER中通过OnResize事件来动态调整控件的位置和大小,以便于在不同分辨率下保持良好的界面布局。 CBUILDER和Delphi中的Form控件具有一个名为OnResize的事件,当Form的尺寸发生变化时,例如...
1. **OnResize事件**: Delphi中的窗体具有`OnResize`事件,当窗体尺寸发生变化时,会触发此事件。在事件处理函数中,你可以添加代码来检查并调整窗体的新尺寸,以确保它始终在指定的最小和最大尺寸范围内。例如: ...
1. **窗体大小调整事件**:Delphi中的窗体对象提供了OnResize事件,当窗体尺寸发生变化时,这个事件会被触发。开发者可以通过编写OnResize事件处理程序来动态地调整窗体内的控件位置和大小,以实现窗口的伸缩效果。 ...