CODEWITHSUNDEEP
javascriptmootools
linjuming
linjuming

Reputation: 2157

when click a dom node,how to bind event and run event in js?

I have an idea, I want to click a button then bind and run some function, this should not bind when dom ready, how to code ?
most of my js function has click event , I normally name these functions and then add
window.addEvent("domready",function(){fn();});
to let it works when dom is ready
Is it a good habit for me doing it like that?

Is this way bellow better?
not to bind the click event when dom ready, but when user click the place,
quickly bind the relative event fn and run
should this way save the resource of browser? for it will not bind all things when dom ready,
sometimes the user will not click the place at all ,so there is no meaning to bind the event.
If better this way, any one can tell me how to code when click then bind and run?

enter image description here

<script type="text/javascript" src="http://localhost/bvtemplates/y01/includes/templates/y01/jscript/jscript_010_mootools.js"></script>\
<script type="text/javascript">
    /* ------- 
        most of my js function has click event , I normally name these functions and then add
        window.addEvent("domready",function(){fn();});
        to let it works when dom is ready
        Is it a good habit for me doing it like that?

        Is this way bellow better?
        not to bind the click event when dom ready, but when user click the place, 
        quickly bind the relative event fn and run
        should this way save the resource of browser? for it will not bind all things when dom ready, 
        sometimes the user will not click the place at all ,so there is no meaning to bind the event.
        If better this way, any one can tell me how to code when click then bind and run?
    ------- */

    function a(){
        $$('.a').addEvent('click', function (){
            alert('a');
        });
    }
    window.addEvent("domready",function(){a();});

    function b(){
        $$('.b').addEvent('click', function (){
            alert('b');
        })'
    }
    window.addEvent("domready",function(){a();});
</script>
<button class="a">a</button>
<button class="b">b</button>

Upvotes: 0

Views: 496

Answers (2)

Codename.D
Codename.D

Reputation: 1

This is not help you to grow code abilities up.. I hope you getting something in this..

<button class="a">a</button>
<button class="b">b</button>
// button should be created first.
 let btn = document.querySelector('.a');
        btn.onclick = function () {
            alert('a');
        } 
 let btn1 = document.querySelector('.b');
 btn1.onclick = function () {
     alert('b');
 }
                    // function a() {
                    //       $$('.a').addEvent('click', function (){
                    //          alert('a');
                    //       });
                    //  }
                 
    // function b(){
    //     $$('.b').addEvent('click', function (){
    //         alert('b');
    //     })
    // }
    // window.addEvent("domready",function() {a();});
</script>

Upvotes: 0

RobG
RobG

Reputation: 147413

Is it a good habit for me doing it like that?

Yes, but there are other strategies that are available. Which one is best depends on your requirements and whether the features of each method suit your situation. But your current strategy is fine and commonly implemented.

Is this way bellow better? not to bind the click event when dom ready, but when user click the place, quickly bind the relative event fn and run

No, you'll be adding a listener to add a listener, which doesn't make sense. Also, listeners called when an event is dispatched have an associated event object that is difficult to replicate using your proposed method unless you implement your own event management framework. Do you want to do that?

should this way save the resource of browser?

No. There are other strategies for reducing the number of listeners in a document, such as event delegation.

for it will not bind all things when dom ready, sometimes the user will not click the place at all ,so there is no meaning to bind the event.

Browsers dispatch zillions of events, they're fairly efficient at it. If performance is an issue, address it then.

Upvotes: 1

Related Questions