복붙노트

[JQUERY] 자바 스크립트의 변수 변화를 듣기

JQUERY

자바 스크립트의 변수 변화를 듣기

해결법


  1. 1.네, 이제 완전하게 가능하다!

    네, 이제 완전하게 가능하다!

    나는이 오래된 스레드 알고 있지만 지금이 효과가 접근에게 (getter 및 setter)를 사용하여 가능하다 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

    당신은 aInternal 필드 a를 대표하는이 같은 객체를 정의 할 수 있습니다 :

    x = {
      aInternal: 10,
      aListener: function(val) {},
      set a(val) {
        this.aInternal = val;
        this.aListener(val);
      },
      get a() {
        return this.aInternal;
      },
      registerListener: function(listener) {
        this.aListener = listener;
      }
    }
    

    그런 다음 다음을 사용하여 리스너를 등록 할 수 있습니다 :

    x.registerListener(function(val) {
      alert("Someone changed the value of x.a to " + val);
    });
    

    아무것도 x.a의 값을 변경할 때마다 그래서, 리스너 함수 해고 될 것이다. 다음 줄을 실행하면 경고 팝업을 가져올 것이다 :

    x.a = 42;
    

    여기에 예를 참조하십시오 https://jsfiddle.net/5o1wf1bn/1/

    또한 사용자 청취자 대신 하나의 수신기 슬롯의 배열,하지만 난 당신에게 가장 간단한 예를주고 싶어 수 있습니다.


  2. 2.이 질문에 대한 답변의 대부분은 중, 효과 오래된, 또는 큰 비 대한 라이브러리의 포함을 요구하고 있습니다 :

    이 질문에 대한 답변의 대부분은 중, 효과 오래된, 또는 큰 비 대한 라이브러리의 포함을 요구하고 있습니다 :

    오늘, 당신은 지금 객체에 대한 변경 모니터 (와 절편)에 대한 프록시 객체를 사용할 수 있습니다. 그것은 영업 이익은 일을하려고 무엇을 위해 만들어진 목적이다. 다음은 기본 예제입니다 :

    var targetObj = {};
    var targetProxy = new Proxy(targetObj, {
      set: function (target, key, value) {
          console.log(`${key} set to ${value}`);
          target[key] = value;
          return true;
      }
    });
    
    targetProxy.hello_world = "test"; // console: 'hello_world set to test'
    

    프록시 개체의 유일한 단점은 다음과 같습니다 :

    중첩 된 객체에 대한 변경 사항을 준수해야하는 경우, 당신은이 이와 같이 작동 (내가 게시 한) 관찰 가능한 슬림으로 도서관 전문 사용해야합니다 :

    var test = {testing:{}};
    var p = ObservableSlim.create(test, true, function(changes) {
        console.log(JSON.stringify(changes));
    });
    
    p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]
    

  3. 3.아니.

    아니.

    그것은 정말 중요하지만, 당신은이 옵션을 (첫번째 테스트, 두 번째되지 않음)이 있습니다

    그래서 같은 첫째, 사용 세터와 게터 :

    var myobj = {a : 1};
    
    function create_gets_sets(obj) { // make this a framework/global function
        var proxy = {}
        for ( var i in obj ) {
            if (obj.hasOwnProperty(i)) {
                var k = i;
                proxy["set_"+i] = function (val) { this[k] = val; };
                proxy["get_"+i] = function ()    { return this[k]; };
            }
        }
        for (var i in proxy) {
            if (proxy.hasOwnProperty(i)) {
                obj[i] = proxy[i];
            }
        }
    }
    
    create_gets_sets(myobj);
    

    당신은 뭔가를 같이 할 수 있습니다 :

    function listen_to(obj, prop, handler) {
        var current_setter = obj["set_" + prop];
        var old_val = obj["get_" + prop]();
        obj["set_" + prop] = function(val) { current_setter.apply(obj, [old_val, val]); handler(val));
    }
    

    다음 리스너를 같이 설정 :

    listen_to(myobj, "a", function(oldval, newval) {
        alert("old : " + oldval + " new : " + newval);
    }
    

    둘째, 사실은 내가 그것에 대해 생각하는 동안 제출 것, 잊어 버렸습니다 :)

    편집 : 아, 기억 : 당신은 값에 시계를 넣을 수 있습니다 :

    'A'거기에 함께하여 MyObj 위 감안할 때 :

    function watch(obj, prop, handler) { // make this a framework/global function
        var currval = obj[prop];
        function callback() {
            if (obj[prop] != currval) {
                var temp = currval;
                currval = obj[prop];
                handler(temp, currval);
            }
        }
        return callback;
    }
    
    var myhandler = function (oldval, newval) {
        //do something
    };
    
    var intervalH = setInterval(watch(myobj, "a", myhandler), 100);
    
    myobj.set_a(2);
    

  4. 4.사용하여 프로토 타입 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    사용하여 프로토 타입 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    // 콘솔 인쇄 기능 (t) { VAR document.getElementById를 C = ( '콘솔'); c.innerHTML = c.innerHTML + '
    '+ t; } // 데모 VAR이 MyVar = 123; Object.defineProperty (이, 'varWatch', { 얻을 : 함수 () {반환이 MyVar을; }, 설정 : 함수 (V) { myVar에 V =; 인쇄 ( '! 값은 새로운 값을 변경 :'+ V); } }); (varWatch) 인쇄; varWatch = 456; (varWatch) 인쇄; <프리 ID = "콘솔">

    // 콘솔 인쇄 기능 (t) { VAR document.getElementById를 C = ( '콘솔'); c.innerHTML = c.innerHTML + '
    '+ t; } // 데모 VAR의 varw = (함수 (컨텍스트) { 창 함수 (변수 varName, varValue) { VAR 값을 varValue =; Object.defineProperty (컨텍스트 변수 varName, { 얻을 : 함수 () {반환 값; }, 설정 : 함수 (V) { 값 = V; 인쇄 ( '! 값은 새로운 값을 변경 :'+ 값); } }); }; })(창문); varw ( 'varWatch'); // 선언 (varWatch) 인쇄; varWatch = 456; (varWatch) 인쇄; 인쇄('---'); varw ( 'otherVarWatch', 123); // 초기 값 선언 (otherVarWatch) 인쇄; otherVarWatch = 789; (otherVarWatch) 인쇄; <프리 ID = "콘솔">


  5. 5.죄송합니다 여기에 오래된 스레드를 가지고, 이에 엘리 회색의 예를 작동하는 방법 (! 나 같은)를 참조하지 않는 사람들을위한 작은 수동입니다 :

    죄송합니다 여기에 오래된 스레드를 가지고, 이에 엘리 회색의 예를 작동하는 방법 (! 나 같은)를 참조하지 않는 사람들을위한 작은 수동입니다 :

    var test = new Object();
    test.watch("elem", function(prop,oldval,newval){
        //Your code
        return newval;
    });
    

    이 캔 도움말 사람을 희망


  6. 6.누가 복음 쉐퍼의 대답으로 (참고 :이 그의 원래의 게시물을 의미 있지만 요점은 여기에 편집 후 유효), 나 또한 가져 오기 한 쌍의 / 당신의 가치를 액세스 할 수있는 설정 방법을 제안합니다.

    누가 복음 쉐퍼의 대답으로 (참고 :이 그의 원래의 게시물을 의미 있지만 요점은 여기에 편집 후 유효), 나 또한 가져 오기 한 쌍의 / 당신의 가치를 액세스 할 수있는 설정 방법을 제안합니다.

    그러나 (... 내가 게시하는거야) 나는 약간의 수정을 건의 할 것입니다.

    그 코드의 문제점은 그것이 청취자를 트리거하지 않고 그 값을 / 액세스 변경할 수 그래서 개체하여 MyObj의 필드 A가 직접 액세스 할 수 있다는 것입니다 :

    var myobj = { a : 5, get_a : function() { return this.a;}, set_a : function(val) { this.a = val; }}
    /* add listeners ... */
    myobj.a = 10; // no listeners called!
    

    따라서, 청취자가 실제로 호출되는 것을 보장하기 위해, 우리는 필드 A와 직접적인 액세스를 금지해야합니다. 어떻게 그렇게 할까? 클로저를 사용!

    var myobj = (function() { // Anonymous function to create scope.
    
        var a = 5;            // 'a' is local to this function
                              // and cannot be directly accessed from outside
                              // this anonymous function's scope
    
        return {
            get_a : function() { return a; },   // These functions are closures:
            set_a : function(val) { a = val; }  // they keep reference to
                                                // something ('a') that was on scope
                                                // where they were defined
        };
    })();
    

    지금 당신은 만들고 누가 제안으로 리스너를 추가하기 위해 같은 방법을 사용할 수 있습니다,하지만 당신은이 주목가는 나 쓰기에 읽을 할 수있는 방법은 없습니다 안심하실 수 있습니다!

    아직 누가 복음의 궤도에, 지금은 간단한 함수 호출에 의해 객체에 캡슐화 필드와 각각의 getter / setter를 추가하는 간단한 방법을 제안한다.

    이것은 단지 값 유형과 제대로 작동합니다. 참조 유형이 작업을 수행하려면, 딥 카피의 어떤 종류 (예를 들어,이 참조) 구현해야합니다.

    function addProperty(obj, name, initial) {
        var field = initial;
        obj["get_" + name] = function() { return field; }
        obj["set_" + name] = function(val) { field = val; }
    }
    

    이것은 이전과 동일하게 작동합니다 : 우리는 함수에 로컬 변수를 만든 다음 우리는 폐쇄를 만들 수 있습니다.

    사용 방법? 단순한:

    var myobj = {};
    addProperty(myobj, "total", 0);
    window.alert(myobj.get_total() == 0);
    myobj.set_total(10);
    window.alert(myobj.get_total() == 10);
    

  7. 7.당신이 (모든 사람이 :-) 사용한다) jQuery를 {UI}를 사용하는 경우, 당신은 숨겨진 요소와 .change ()를 사용할 수 있습니다.

    당신이 (모든 사람이 :-) 사용한다) jQuery를 {UI}를 사용하는 경우, 당신은 숨겨진 요소와 .change ()를 사용할 수 있습니다.


  8. 8.AngularJS와 (I이 JQuery와 아니라는 것을 알고 있지만, 그 힘의 도움 [순수 JS 이론에서 좋은 전용].)

    AngularJS와 (I이 JQuery와 아니라는 것을 알고 있지만, 그 힘의 도움 [순수 JS 이론에서 좋은 전용].)

    $scope.$watch('data', function(newValue) { ..
    

    여기서 "데이터"범위에서 변수의 이름입니다.

    문서에 대한 링크가 있습니다.


  9. 9.나중에 몇 년에 그 조정을 위해 :

    나중에 몇 년에 그 조정을 위해 :

    대부분의 브라우저 (및 IE6 +)에 대한 솔루션을 사용할 것을 사용하는 onpropertychange 이벤트 및 새로운 사양 defineProperty. 약간의 캐치는 당신이 당신의 변수는 DOM 개체를 확인해야합니다 것입니다.

    전체 세부 정보 :

    http://johndyer.name/native-browser-get-set-properties-in-javascript/


  10. 10.당신이 찾고있는 기능은 "defineProperty ()"메소드의 사용을 통해 달성 될 수있다 - 최신 브라우저 만 사용할 수 있습니다 :

    당신이 찾고있는 기능은 "defineProperty ()"메소드의 사용을 통해 달성 될 수있다 - 최신 브라우저 만 사용할 수 있습니다 :

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    난 당신이 더 크로스 브라우저 지원을 필요로하는 경우 몇 가지 유사한 기능을 가진 jQuery를 확장을 작성했습니다 :

    https://github.com/jarederaj/jQueue


  11. 11.아니 직접 : 당신은 어떤 종류의 "의 addListener /의 removeListener"인터페이스 ... 또는 NPAPI 플러그인과 쌍 게터 / 세터가 필요합니다 (그러나 그것은 완전히 다른 이야기입니다).

    아니 직접 : 당신은 어떤 종류의 "의 addListener /의 removeListener"인터페이스 ... 또는 NPAPI 플러그인과 쌍 게터 / 세터가 필요합니다 (그러나 그것은 완전히 다른 이야기입니다).


  12. 12.가장 쉬운 방법은 나는이 대답부터 발견했다 :

    가장 쉬운 방법은 나는이 대답부터 발견했다 :

    // variable holding your data
    const state = {
      count: null,
      update() {
        console.log(`this gets called and your value is ${this.pageNumber}`);
      },
      get pageNumber() {
        return this.count;
      },
      set pageNumber(pageNumber) {
        this.count = pageNumber;
        // here you call the code you need
        this.update(this.count);
      }
    };
    

    그리고:

    state.pageNumber = 0;
    // watch the console
    
    state.pageNumber = 15;
    // watch the console
    

  13. 13.내 경우, 나는 어떤 라이브러리 내 window.player을 재정의 된 내 프로젝트에 포함 된 경우 알아 내려고했다. 그래서, 내 코드의 시작에서, 난 그냥했다 :

    내 경우, 나는 어떤 라이브러리 내 window.player을 재정의 된 내 프로젝트에 포함 된 경우 알아 내려고했다. 그래서, 내 코드의 시작에서, 난 그냥했다 :

    Object.defineProperty(window, 'player', {
      get: () => this._player,
      set: v => {
        console.log('window.player has been redefined!');
        this._player = v;
      }
    });
    

  14. 14.

    //ex:
    /*
    var x1 = {currentStatus:undefined};
    your need is x1.currentStatus value is change trigger event ?
    below the code is use try it.
    */
    function statusChange(){
        console.log("x1.currentStatus_value_is_changed"+x1.eventCurrentStatus);
    };
    
    var x1 = {
        eventCurrentStatus:undefined,
        get currentStatus(){
            return this.eventCurrentStatus;
        },
        set currentStatus(val){
            this.eventCurrentStatus=val;
          //your function();
        }
    };
    

    또는

    /*  var x1 = {
    eventCurrentStatus:undefined,
    currentStatus : {
        get : function(){
            return Events.eventCurrentStatus
            },
        set : function(status){
            Events.eventCurrentStatus=status;
    
        },
    }*/
    console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
    x1.currentStatus="create"
    console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
    x1.currentStatus="edit"
    console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
    console.log("currentStatus = "+ x1.currentStatus);
    

    또는

    /* global variable ku*/
        var jsVarEvents={};
        Object.defineProperty(window, "globalvar1", {//no i18n
            get: function() { return window.jsVarEvents.globalvarTemp},
            set: function(value) { window.window.jsVarEvents.globalvarTemp = value; }
        });
        console.log(globalvar1);
        globalvar1=1;
        console.log(globalvar1);
    

  15. 15.오히려 간단하고 단순한 솔루션은 직접 값을 설정 결코 글로벌 변수의 값을 설정하지,하고 함수 호출을 사용하는 것입니다. 이 방법 당신은 전체 제어 할 수 있습니다 :

    오히려 간단하고 단순한 솔루션은 직접 값을 설정 결코 글로벌 변수의 값을 설정하지,하고 함수 호출을 사용하는 것입니다. 이 방법 당신은 전체 제어 할 수 있습니다 :

    var globalVar;
    
    function setGlobalVar(value) {
        globalVar = value;
        console.log("Value of globalVar set to: " + globalVar);
        //Whatever else
    }
    

    이 시행 할 수있는 방법은 아무데도 당신의 코드를 직접 globalVar의 값을 설정하지 않는 확인 그렙 (또는 비슷한)를 사용할 수 있지만, 그냥 ... 훈련 프로그래밍이 필요 없다.

    또는 당신은 객체와 사용자 getter와 setter 메소드 ... 그냥 생각에 캡슐화 할 수있다.


  16. 16.사람은 처음 질문은하지 객체의 경우, 변수였다 기억하시기 바랍니다)

    사람은 처음 질문은하지 객체의 경우, 변수였다 기억하시기 바랍니다)

    모든 대답 이외에 위, 나는 forTheWatch.js라는 작은 lib 디렉토리를 생성 즉, 자바 스크립트에서 정상 전역 변수의 변화를 캐치하고 콜백 같은 방법을 사용합니다.

    JQUERY 변수와 호환 사용할 필요 개체 없으며, 필요한 경우 직접 여러 가지 변수의 배열을 전달할 수 있습니다.

    그것은 도움이 될 수 있다면 ... : https://bitbucket.org/esabora/forthewatch 기본적으로 당신은 단지 함수를 호출해야합니다 : watchIt ( "theVariableToWatch", "varChangedFunctionCallback");

    그리고 관련이없는 경우 사전으로 죄송합니다.


  17. 17.최근에 같은 문제로 자신을 발견했다. 변수의 변화를 수신하고 변수가 변경 될 때 몇 가지 물건을하고 싶었다.

    최근에 같은 문제로 자신을 발견했다. 변수의 변화를 수신하고 변수가 변경 될 때 몇 가지 물건을하고 싶었다.

    누군가가 세터를 사용하여 값을 설정하는 간단한 솔루션을 제안했다.

    여기 내 변수의 값을 유지하는 간단한 객체를 선언 :

    var variableObject = {
        value: false,
        set: function (value) {
            this.value = value;
            this.getOnChange();
        }
    }
    

    목적은 I 값을 변경할 수있는 방법을 통해 한 세트를 포함한다. 그러나 그것은 또한 거기에 getOnChange () 메서드를 호출합니다. 지금 정의합니다.

    variableObject.getOnChange = function() {
        if(this.value) {
            // do some stuff
        }
    }
    

    지금은 (참) variableObject.set의 getOnChange 방법 화재를 할 때마다, 값이 (내 경우는 true) 원하는대로 설정 한 경우, 또한 경우 블록이 실행됩니다.

    이것은 내가이 물건을 할 수있는 간단한 방법입니다.


  18. 18.그것은 바로 수 없습니다.

    그것은 바로 수 없습니다.

    그러나이 맞춤 이벤트를 사용하여 수행 할 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

    아래의 방법은 입력으로 변수 이름의 배열을 수용하고, 각 변수에 대한 이벤트 리스너를 추가하고, 변수 값의 변경에 대한 이벤트를 트리거한다.

    방법은 값의 변화를 감지하는 폴링을 사용합니다. 당신은 밀리 초 단위로 시간 제한 값을 증가시킬 수있다.

    function watchVariable(varsToWatch) {
        let timeout = 1000;
        let localCopyForVars = {};
        let pollForChange = function () {
            for (let varToWatch of varsToWatch) {
                if (localCopyForVars[varToWatch] !== window[varToWatch]) {
                    let event = new CustomEvent('onVar_' + varToWatch + 'Change', {
                        detail: {
                            name: varToWatch,
                            oldValue: localCopyForVars[varToWatch],
                            newValue: window[varToWatch]
                        }
                    });
                    document.dispatchEvent(event);
                    localCopyForVars[varToWatch] = window[varToWatch];
                }
            }
            setTimeout(pollForChange, timeout);
        };
        let respondToNewValue = function (varData) {
            console.log("The value of the variable " + varData.name + " has been Changed from " + varData.oldValue + " to " + varData.newValue + "!!!"); 
        }
        for (let varToWatch of varsToWatch) {
            localCopyForVars[varToWatch] = window[varToWatch];
            document.addEventListener('onVar_' + varToWatch + 'Change', function (e) {
                respondToNewValue(e.detail);
            });
        }
        setTimeout(pollForChange, timeout);
    }
    

    메서드를 호출하여 :

    watchVariables(['username', 'userid']);
    

    이 변수의 사용자 이름과 사용자 ID에 대한 변경 사항을 감지합니다.


  19. 19.getter 및 setter의 도움으로, 당신은 같은 일을하는 자바 스크립트 클래스를 정의 할 수 있습니다.

    getter 및 setter의 도움으로, 당신은 같은 일을하는 자바 스크립트 클래스를 정의 할 수 있습니다.

    첫째, 우리는 우리의 클래스가 MonitoredVariable라고 정의한다 :

    class MonitoredVariable {
      constructor(initialValue) {
        this._innerValue = initialValue;
        this.beforeSet = (newValue, oldValue) => {};
        this.beforeChange = (newValue, oldValue) => {};
        this.afterChange = (newValue, oldValue) => {};
        this.afterSet = (newValue, oldValue) => {};
      }
    
      set val(newValue) {
        const oldValue = this._innerValue;
        // newValue, oldValue may be the same
        this.beforeSet(newValue, oldValue);
        if (oldValue !== newValue) {
          this.beforeChange(newValue, oldValue);
          this._innerValue = newValue;
          this.afterChange(newValue, oldValue);
        }
        // newValue, oldValue may be the same
        this.afterSet(newValue, oldValue);
      }
    
      get val() {
        return this._innerValue;
      }
    }
    

    우리의 초기 비용 0 MonitoredVariable의 인스턴스를 만들 수 있습니다, 돈의 변경을 수신한다고 가정합니다 :

    const money = new MonitoredVariable(0);
    

    그럼 우리가 얻거나 money.val를 사용하여 값을 설정할 수 있습니다 :

    console.log(money.val); // Get its value
    money.val = 2; // Set its value
    

    우리는 그것을 위해 리스너를 정의하지 않았으므로, 아무것도 특별는 2 money.val 변경 후 발생합니다.

    이제 일부 청취자를 정의 할 수 있습니다. beforeSet, beforeChange, afterChange, afterSet : 우리는 4 가지 청취자가 있습니다. 당신이 변화 변수의 값을 money.val = NEWVALUE를 사용할 때 다음은 순차적으로 일어날 것입니다 :

    이제 우리는 (afterSet가 새 값이 이전과 같은 경우에도 트리거 될 때) money.val가 변경된 후 트리거 될 afterChange 리스너를 정의한다 :

    money.afterChange = (newValue, oldValue) => {
      console.log(`Money has been changed from ${oldValue} to ${newValue}`);
    };
    

    이제 새 값 3을 설정하고 어떻게되는지 :

    money.val = 3;
    

    당신은 콘솔에 다음과 같이 표시됩니다

    Money has been changed from 2 to 3
    

    전체 코드의 경우, https://gist.github.com/yusanshi/65745acd23c8587236c50e54f25731ab를 참조하십시오.


  20. 20.이 오래된 스레드하지만 각도를 사용하여 솔루션을 찾고있는 동안 나는 두 번째로 높은 응답 (사용자 정의 리스너)에 비틀 거렸다. 솔루션 작동하는 동안, 각이 사용 @Output 및 이벤트 이미 터를 해결하기 위해 더 나은 내장 방식이있다. 사용자 정의 리스너 응답의 예로 떨어져가는 :

    이 오래된 스레드하지만 각도를 사용하여 솔루션을 찾고있는 동안 나는 두 번째로 높은 응답 (사용자 정의 리스너)에 비틀 거렸다. 솔루션 작동하는 동안, 각이 사용 @Output 및 이벤트 이미 터를 해결하기 위해 더 나은 내장 방식이있다. 사용자 정의 리스너 응답의 예로 떨어져가는 :

    ChildComponent.html

    <button (click)="increment(1)">Increment</button>
    

    ChildComponent.ts

    import {EventEmitter, Output } from '@angular/core';
    
    @Output() myEmitter: EventEmitter<number> = new EventEmitter<number>();
    
    private myValue: number = 0;
    
    public increment(n: number){
      this.myValue += n;
    
      // Send a change event to the emitter
      this.myEmitter.emit(this.myValue);
    }
    

    ParentComponent.html

    <child-component (myEmitter)="monitorChanges($event)"></child-component>
    <br/>
    <label>{{n}}</label>
    

    ParentComponent.ts

    public n: number = 0;
    
    public monitorChanges(n: number){
      this.n = n;
      console.log(n);
    }
    

    이제이 아닌 부모에게 아이 버튼을 클릭 할 때마다 업데이트됩니다. 근무 stackblitz


  21. 21.

    Utils = {
        eventRegister_globalVariable : function(variableName,handlers){
            eventRegister_JsonVariable(this,variableName,handlers);
        },
        eventRegister_jsonVariable : function(jsonObj,variableName,handlers){
            if(jsonObj.eventRegisteredVariable === undefined) {
                jsonObj.eventRegisteredVariable={};//this Object is used for trigger event in javascript variable value changes ku
            }
            Object.defineProperty(jsonObj, variableName , {
                        get: function() { 
                            return jsonObj.eventRegisteredVariable[variableName] },
                        set: function(value) {
                            jsonObj.eventRegisteredVariable[variableName] = value; handlers(jsonObj.eventRegisteredVariable[variableName]);}
                        });
                }
    
  22. from https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript by cc-by-sa and MIT license