LHJ

I'm a FE developer.

jquery $.proxy

17 May 2020 » jquery

jquery $.proxy는 원하는 객체를 넘길 수 있습니다.
다음과 같이 textAreaOnFunc 함수 객체를 넘길 수도 있고,
proxy를 사용 안하면 이벤트를 발생시킨 객체를 넘길 수도 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    (function (win, $) {
        var coordGenerator = {
            init: function () {
                this.setElements();
                this.bindEvents();
            },
            setElements: function () {
                this.textArea = $('textarea');
            },
            bindEvents: function () {
                this.textArea.on('focus',$.proxy(this.textAreaOnFunc, this))
            },
            textAreaOnFunc : function (e) {
                console.log('test');
                // console.log($(this));
            }
        };
        coordGenerator.init();
    })(window, window.jQuery);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    (function (win, $) {
        var coordGenerator = {
            init: function () {
                this.setElements();
                this.bindEvents();
            },
            setElements: function () {
                this.textArea = $('textarea');
            },
            bindEvents: function () {
                this.textArea.on('focus',this.textAreaOnFunc)
            },
            textAreaOnFunc : function (e) {
                console.log('test');
                // console.log($(this));
                $(this).toggleClass('on');
            }
        };
        coordGenerator.init();
    })(window, window.jQuery);

</script>
</body>
</html>

Related Posts