---

When to use it?

This method not only improves the look and feel of web apps but also makes adding click events easier, like opening modals or starting animations. It’s efficient because it loads content only when needed, which helps web pages load faster and use less data. This means a better experience for users and less strain on their devices.

It’s also flexible, allowing developers to easily add various libraries,from modals to request handlers. This makes adding new features simple, without much coding. The method is designed to be fast and user-friendly, perfect for interactive projects. It enables sleek and effective web apps, meeting modern development needs with less effort. It’s all about making web apps that are good-looking, fast, and easy to use.

How To use it?

bstf.click({    
    element:document.getElementById('js--fire'),
    callback: async () =>{
       console.log('callback when user click document.getElementById('js--fire')')
    }
})

Configuration options

• element: HTML - document.querySelector('.js--click-boostify')by default - The DOM element(s) to attach the click event listener to. This can be a single DOM element or an array of DOM elements.

• callback: Function A function to be executed when the click event is triggered.

Note There is a public method destroy in case you want to destroy this event, you just need to provide the fire event.

bstf.destroyclick({element:document.getElementById('js--fire')}) // DOM element mandatory

Real World Examples

Example 1

This example load tiny slider stylesheet & library, and finally instciate with a simple configuration.

bstf.click({
    element:document.getElementById('js--click-boostify'),
    callback: async () =>{
        await bstf.loadStyle({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css',
            attributes: ['media=all'],
            appendTo: 'head'
        });
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js',
            attributes: ['type="text/javascript"'],
            appendTo: 'body'
        });
        var slider = tns({
            container: '.my-slider',
            items: 3,
            slideBy: 'page',
            autoplay: true
        });
    }
})