jquery 的$(window).resize() 是如何触发window的resize事件的

问答首页 → Web前端技术

0 0

jquery 的$(window).resize() 是如何触发window的resize事件的5

用的什么原生的javascript方法？

问题补充：
我的意思是用程序掉用$(window).resize()，这样就可以触发window的resize事件，而直接用javascript如何实现了？

jQuery

2012年8月19日 04:32

ohyea
25
0 0 1

4个答案按时间排序按投票排序

0 0

http://www.51hint.com/end-of-jquery-resize-event.html
这个实现resize事件非常不错的

2014年6月24日 09:53

flyhawk007j2me
30
0 0 1

添加评论

0 0

$(window).resize()并没有正真的触发浏览器resize事件。只是回调了绑定在window对象上onresize回调函数。

jquery的doc文档所言：

引用

This method is a shortcut for .bind('resize', handler) in the first and second variations, and .trigger('resize') in the third.

第三个作用是触发绑定在resize事件上的函数。

看看jquery的源码如何做到的。

// Note that this is a bare JS function and not a jQuery handler
                        handle = ontype && cur[ ontype ];
                        if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) {
                                event.preventDefault();
                        }

其中cur是window对象 ontype为"onresize". handle为处理函数/回调函数。
handle.apply( cur, data ) 为真正的调用回调函数。

引用

而直接用javascript如何实现了？

大概明白了吧。直接调用了绑定在window上的onresize回调函数。

简单的demo


<!DOCTYPE HTML>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>window resize trigger</title>
        <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <script type="text/javascript">
            window.onresize = function(){
                alert(2222);
            }
            $(window).resize();
        </script>
</head>
<body>
           
</body>
</html>

2012年8月19日 10:14

Anddy
2157
0 0 0

添加评论

0 0

哦，我试了下可以这样：

<script type='text/javascript'>
window.onresize=function(){alert(234);};

if( document.createEvent) {
var event = document.createEvent ("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);
} else if(document.createEventObject){
window.fireEvent("onresize");
}

</script>

具体可以参考：
http://hi.baidu.com/flondon/item/6f515e098db48034a2332a68
http://northc.iteye.com/blog/1245048

2012年8月19日 08:16

jinnianshilongnian
7280
2 3 591

1条评论

0 0

等价于javascript中DOM的onresize事件处理

以下引自 w3cSchool：

引用

onresize 事件会在窗口或框架被调整大小时发生。

支持该事件的 HTML 标签：
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, 
<dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>,
<hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, 
<pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, 
<textarea>, <tt>, <ul>, <var>

引用

支持该事件的 JavaScript 对象：
window

引用

2012年8月19日 07:43

jinnianshilongnian
7280
2 3 591

1条评论

已解决问题

未解决问题

排行榜

查看全部排名>>