JavaScript 창 크기 조정 이벤트

JavaScript 창 크기 조정 이벤트

---

브라우저 창 크기 조정 이벤트에 연결하려면 어떻게해야합니까?

거기에 크기 조정 이벤트를 수신의의 jQuery 방법은 하지만 난 그냥이 하나 개의 요구 사항에 대한 내 프로젝트에 그것을 가지고하지 않으려는 것입니다.

---

jQuery는 표준 resizeDOM 이벤트를 래핑합니다 .

window.onresize = function(event) {
    ...
};

jQuery 는 크기 조정 이벤트가 모든 브라우저에서 일관되게 실행되도록 일부 작업을 수행 할 수 있지만 브라우저가 다른지 확실하지 않지만 Firefox, Safari 및 IE에서 테스트하는 것이 좋습니다.

---

window.onresize 함수를 재정의하지 마십시오.

대신 개체 또는 요소에 이벤트 리스너를 추가하는 함수를 만듭니다. 이것은 리스너가 작동하지 않는 경우를 확인하고 경우 마지막 수단으로 객체의 기능을 재정의합니다. 이것은 jQuery와 같은 라이브러리에서 사용되는 기본 방법입니다.

object: 요소 또는 창 객체
type: 크기 조정, 스크롤 (이벤트 유형)
callback: 함수 참조

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

그런 다음 사용은 다음과 같습니다.

addEvent(window, "resize", function_reference);

또는 익명 함수로 :

addEvent(window, "resize", function(event) {
  console.log('resized');
});

---

먼저 addEventListener위의 주석에 방법이 언급되어 있음을 알고 있지만 코드를 보지 못했습니다. 선호되는 접근 방식이므로 다음과 같습니다.

window.addEventListener('resize', function(event){
  // do stuff here
});

다음은 작동하는 샘플 입니다.

---

resize 이벤트는 크기를 조정할 때 지속적으로 발생하므로 직접 사용해서는 안됩니다.

디 바운스 기능을 사용하여 초과 호출을 완화하십시오.

window.addEventListener('resize',debounce(handler, delay, immediate),false);

여기에 일반적인 디 바운스가 있지만 lodash에서 더 발전된 것을 찾아보아야합니다.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

이렇게 사용할 수 있습니다 ...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

200ms마다 한 번 이상 실행되지 않습니다.

모바일 방향 변경의 경우 다음을 사용하십시오.

window.addEventListener('orientationchange', () => console.log('hello'), false);

여기에 깔끔하게 정리하기 위해 모아 놓은 작은 도서관 이 있습니다.

---

나는 이미 @Alex V에서 정답을 제공했다고 생각하지만, 그 답은 현재 5 년이 넘었 기 때문에 약간의 현대화가 필요합니다.

두 가지 주요 문제가 있습니다.

1. object매개 변수 이름으로 사용하지 마십시오 . 예약 된 단어입니다. 이 말과 함께 @Alex V의 제공 기능은 strict mode.

2. addEvent@ 알렉스 V에 의해 제공되는 함수를 반환하지 않는 event object경우 생성 addEventListener방법이 사용된다. addEvent이를 허용 하려면 다른 매개 변수를 함수에 추가해야합니다 .

참고 : addEvent이 새 함수 버전으로 마이그레이션해도이 함수에 대한 이전 호출이 중단되지 않도록 새 매개 변수가 선택 사항이되었습니다. 모든 레거시 사용이 지원됩니다.

addEvent이러한 변경 사항으로 업데이트 된 기능은 다음과 같습니다.

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

새 addEvent함수에 대한 예제 호출 :

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

---

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html 에서 내 블로그 게시물을 참조 해 주셔서 감사합니다 .

While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.

My method involves a short timeout that gets cancelled on subsequent events so that the event doesn't get bubbled up to your code until the user has finished resizing the window.

---

Solution for 2018+:

You should use ResizeObserver. It will be a browser-native solution that has a much better performance than to use the resize event. In addition, it not only supports the event on the document but also on arbitrary elements.

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Currently, only Chrome supports it but other browsers will likely follow (soon). For now you have to use a polyfill.

---

window.onresize = function() {
    // your code
};

---

The following blog post may be useful to you: Fixing the window resize event in IE

It provides this code:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

---

The already mentioned solutions above will work if all you want to do is resize the window and window only. However, if you want to have the resize propagated to child elements, you will need to propagate the event yourself. Here's some example code to do it:

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

Note that a child element can call

 event.preventDefault();

on the event object that is passed in as the first Arg of the resize event. For example:

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

---

var EM = new events_managment();

EM.addEvent(window, 'resize', function(win,doc, event_){
    console.log('resized');
    //EM.removeEvent(win,doc, event_);
});

function events_managment(){
    this.events = {};
    this.addEvent = function(node, event_, func){
        if(node.addEventListener){
            if(event_ in this.events){
                node.addEventListener(event_, function(){
                    func(node, event_);
                    this.events[event_](win_doc, event_);
                }, true);
            }else{
                node.addEventListener(event_, function(){
                    func(node, event_);
                }, true);
            }
            this.events[event_] = func;
        }else if(node.attachEvent){

            var ie_event = 'on' + event_;
            if(ie_event in this.events){
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                    this.events[ie_event]();
                });
            }else{
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                });
            }
            this.events[ie_event] = func;
        }
    }
    this.removeEvent = function(node, event_){
        if(node.removeEventListener){
            node.removeEventListener(event_, this.events[event_], true);
            this.events[event_] = null;
            delete this.events[event_];
        }else if(node.detachEvent){
            node.detachEvent(event_, this.events[event_]);
            this.events[event_] = null;
            delete this.events[event_];
        }
    }
}

---

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>

참고URL : https://stackoverflow.com/questions/641857/javascript-window-resize-event