Javascript DOM .click() Framework

What is framework .click() ?

The framework .click() is many used by all website. .click() is easy in use to create some popup, some alert, some link, etc.
Usually, many other website is using jquery or other framework to create their website more elegant or wonderfull.

How to create javascript framework .click() by yourself ?

Before you create the framework, please try the demo below. ( You click the button and than the alert will be display ).

Demo

<br />

Step by step to create this framework :

1. First, create a HTML file, and than create a button with class (to add button style) and id.
Example:

<button id="myBt" class="myBtn">Click Me</button>

2. Next, create a css file to make the button more elegant.
Example:


.myBtn{
padding: 6px 12px;
background-color: #252c4a;
border: none;
border-radius: 3px;
margin: auto;
}

3. After that, create the framework .click(). insert the DOM ( Document Object Model) into the function. Use document.querySelectorAll().
Example:

var DOM = function (selector) {
  if (typeof selector == "string") {
        selector = document.querySelectorAll(selector);
  }
  .
  .
  .
  .

4. After that, create an object and function with selector but use different name, use this.click (to create object) = function(func){} (to create function).

Example:

.
.
.
  this.click = function (fun) {
      var el = selector;
      for (var i = 0, len = el.length; i < len; i++) {
        el[i].onclick = fun.bind(el);
      }
  }
  .
  .
  .

5. Next, if the framework is callback, create a new function using var $.

Example:


var $ = function(selector){
return new DOM(selector);}

6. Finally, test your framework code using $('button id or class').click(function(){ code here }).
Example:


$('#myBt').click(function(){alert('HELLO WORLD, This is the example of framework .click()');});

Full kode:

<html>
<head>
<meta name="viewport" content="initial-scale=1">
<style type=
"text/css">
.myBtn
{
padding : 6px 12px;
background-color : #252c4a;
border : none;
border-radius : 3px;
margin : auto;
}
</style>
<title>
</title>
</head>
<body>
    
<button id="myBt" class="myBtn">Click Me<br />
</button><br />
<!-- my framework --><br />
<script type="text/javascript">
var DOM = function (selector) {
  if (typeof selector == "string") {
        selector = document.querySelectorAll(selector);
  }

  this.click = function (fun) {
      var el = selector;
      for (var i = 0, len = el.length; i < len; i++) {
        el[i].onclick = fun.bind(el);
      }
  }
};

var $ = function (selector) {
    return new DOM(selector);
};
</script>


<!-- the caller -->
<script>
$('#myBt')
  .click(
    function() {
     alert('HELLO WORLD, This is the example of framework .click()');
    });
</script>
</body>
</html>

7 KILOMETER