您现在的位置是：课程教程文章

js中resize事件是什么

2023-12-13 23:03课程教程文章人已围观

课程介绍: 1、 js中resize事件是什么课程推荐; 2、 js中resize事件是什么课程专题

1、当浏览器窗口调整到新的高度或宽度时，会触发resize事件。

2、在window(窗口)上触发，因此可以通过JavaScript或元素中的onresize特性来指定事件处理程序。

实例

/**
*Createdbytaozhon2017/5/6.
*taozh1982@gmail.com
*/
varEleResize={
_handleResize:function(e){
varele=e.target||e.srcElement;
vartrigger=ele.__resizeTrigger__;
if(trigger){
varhandlers=trigger.__z_resizeListeners;
if(handlers){
varsize=handlers.length;
for(vari=0;i<size;i++){
varh=handlers[i];
varhandler=h.handler;
varcontext=h.context;
handler.apply(context,[e]);
}
}
}
},
_removeHandler:function(ele,handler,context){
varhandlers=ele.__z_resizeListeners;
if(handlers){
varsize=handlers.length;
for(vari=0;i<size;i++){
varh=handlers[i];
if(h.handler===handler&&h.context===context){
handlers.splice(i,1);
return;
}
}
}
},
_createResizeTrigger:function(ele){
varobj=document.createElement('object');
obj.setAttribute('style',
'display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;opacity:0;pointer-events:none;z-index:-1;');
obj.onload=EleResize._handleObjectLoad;
obj.type='text/html';
ele.appendChild(obj);
obj.data='about:blank';
returnobj;
},
_handleObjectLoad:function(evt){
this.contentDocument.defaultView.__resizeTrigger__=this.__resizeElement__;
this.contentDocument.defaultView.addEventListener('resize',EleResize._handleResize);
}
};
if(document.attachEvent){//ie9-10
EleResize.on=function(ele,handler,context){
varhandlers=ele.__z_resizeListeners;
if(!handlers){
handlers=[];
ele.__z_resizeListeners=handlers;
ele.__resizeTrigger__=ele;
ele.attachEvent('onresize',EleResize._handleResize);
}
handlers.push({
handler:handler,
context:context
});
};
EleResize.off=function(ele,handler,context){
varhandlers=ele.__z_resizeListeners;
if(handlers){
EleResize._removeHandler(ele,handler,context);
if(handlers.length===0){
ele.detachEvent('onresize',EleResize._handleResize);
deleteele.__z_resizeListeners;
}
}
}
}else{
EleResize.on=function(ele,handler,context){
varhandlers=ele.__z_resizeListeners;
if(!handlers){
handlers=[];
ele.__z_resizeListeners=handlers;

if(getComputedStyle(ele,null).position==='static'){
ele.style.position='relative';
}
varobj=EleResize._createResizeTrigger(ele);
ele.__resizeTrigger__=obj;
obj.__resizeElement__=ele;
}
handlers.push({
handler:handler,
context:context
});
};
EleResize.off=function(ele,handler,context){
varhandlers=ele.__z_resizeListeners;
if(handlers){
EleResize._removeHandler(ele,handler,context);
if(handlers.length===0){
vartrigger=ele.__resizeTrigger__;
if(trigger){
trigger.contentDocument.defaultView.removeEventListener('resize',EleResize._handleResize);
ele.removeChild(trigger);
deleteele.__resizeTrigger__;
}
deleteele.__z_resizeListeners;
}
}
}
}

以上就是js中resize事件的介绍，希望对大家有所帮助。更多Javascript学习指路：Javascript

推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

课程教程：js中resize事件是什么