How do I use an event inside a "class" javascript, from the mouseup of a container?

Question

How do I use an event inside a "class" javascript, from the mouseup of a container?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

        function MakeDrawable(containerID){
            this.container = (document.getElementById(containerID) || document.body);
            this.onCreateElement = null;//Evento externo
            this.container.onmouseup = function(e){
                e.preventDefault();
                var hash = {Nombre:"Hola", Apellido: "Mundo"};
                //Quiero llamar a mi evento externo
                this.onCreateElement(hash);
            }
        }
        //Implementacion

        var drawableContainer = new MakeDrawable("qa");
        drawableContainer.onCreateElement = function(hash){
            alert(JSON.stringify(hash));
        };

Thank you in advance for your time!

The question of the title is that it is half confused, but the code explains my doubt well.

My idea with this is to make the implementation and use the event by bindeandole a function created by me, that it receives an argument. The thing is that it is not working, I do not know how to access from the container mouseup to the onCreateElement event that I have in my MakeDrawable class, keeping the execution thread of each < em> new what about the class.

Thank you very much!

Edit: Ignore the semicolon or keys because the code was cut to have the specific case. I'm interested in the part of the call.

javascript clase eventos

asked by Jose Sebastian Garcia 11.11.2017 в 22:08

source

2 answers

1

It is not possible to do it the way you want. For example, in the onmouseup method, when you want to send hash to onCreateElement this at that time is not the class and that's why you miss an error. The scope of this in this method changes. Look what I did with your code.

function MakeDrawable(containerID){
        let self = this;
        this.container = (document.getElementById(containerID) || document.body);
        this.onCreateElement = function(hash) {
            alert(JSON.stringify(hash))
        };//Evento externo
        this.container.onmouseup = function(e){
            e.preventDefault();
            var hash = {Nombre:"Hola", Apellido: "Mundo"};
            //Quiero llamar a mi evento externo
            self.onCreateElement(hash);
        }
    }
    //Implementacion

    var drawableContainer = new MakeDrawable("qa");

Capture the this of the class in the self variable to be able to reference this in the onmouseup method. I hope I have helped you.

answered by 12.11.2017 в 01:21

WEB9102: Web Login Failed parallax inside div

score 0 · Accepted Answer

Good evening answering my own question, I leave an example code where I install Javascript classes and I can make a call to events assigned from outside.

Greetings and I hope you serve them!

<!DOCTYPE html>

Test

    <script>
        function XCore(iContainer){
            var XCore = this;
            this.Container = iContainer;
            this.TextBox = _TextBox;

            function _TextBox(name){
                var TextBox = this;
                this.Name = name;
                this.Control = _Control;
                this.Render = _Render;
                this.ChangeClass = "";

                this.KeyPress = function(){};


                function _Control(){
                    var inputText;

                    if(typeof(document.getElementById(TextBox.Name)) == "undefined" || (typeof(document.getElementById(TextBox.Name)) == "object" && document.getElementById(TextBox.Name) == null )){
                        inputText = document.createElement("input");
                        inputText.setAttribute("type","text");
                        inputText.setAttribute("id",TextBox.Name);
                        inputText.setAttribute("name",TextBox.Name);
                    }

                    return document.getElementById(TextBox.Name) || inputText;
                }

                function _Render(){
                    var container = document.getElementById(XCore.Container) || document.body;
                    container.setAttribute("class", "Container");
                    container.appendChild(TextBox.Control());

                    TextBox.Control().onkeypress = TextBox.KeyPress;
                    TextBox.Control().setAttribute("class",TextBox.ChangeClass);
                }
            }
        }

    </script>
    <style>
        .Container{
            margin: 0px;
            padding: 0px;
        }
        .TextBox{
            clear: both;
            float: left;
            display: block;
            padding: 10px;
            width: 200px;
            margin-top: 5px;

        }
        .TextBox.Red{
            border: 1px solid #FF0000;
            background: #F0F0F0;
            color: #A0A0A0;
        }
        .TextBox.Blue{
            border: 1px solid #00AAFF;
            background: #FFFFFF;
            color: #A0A0A0;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <script>
        var core = new XCore();
        var nombre = new core.TextBox("nombre");
        nombre.ChangeClass = "TextBox Red";
        nombre.Render();

        var apellido = new core.TextBox("apellido");
        apellido.ChangeClass = "TextBox Blue";
        apellido.KeyPress = function (e){
            alert(e.which);
        };
        apellido.Render();
    </script>
</body>