How to bind an event to a button on the page?

He plans to write a series of examples to help the front end of the new shoes into the pit, but also sort out their knowledge. Is expected to have about 30, This is the first: how to bind an event to a button on the page? Copy and paste the text of the code can be saved as an html file preview in Chrome in this case - to achieve it is to have a button on the page, click on a pop-pop Hello.

1, native to achieve

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

Also this:

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button id="button">
      按钮
    </button>
    <script>
      var button = document.getElementById('button')
      button.addEventListener('click', buttonHandler)
    </script>
  </body>
</html>
复制代码

This should be easy to understand, the question is whether the two script in the code can be merged together? After the merger into what position?

2, JQuery achieve

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button id="button">
      按钮
    </button>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script>
      $('#button').on('click', buttonHandler)
    </script>
  </body>
</html>
复制代码

$How the method is implemented? .onHow the method is implemented?

3, Vue achieve

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <div id="app">
      <button @click="buttonHandler">
        按钮
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        methods: {
          buttonHandler: buttonHandler
        },
      })
    </script>
  </body>
</html>
复制代码

VueHow to achieve the event binding? VueThis class have done something?

4, React achieve

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script>
      class Button extends React.Component {
        render() {
          return React.createElement(
            'button',
            { onClick: buttonHandler },
            '按钮'
          );
        }
      }
      const domContainer = document.querySelector('#app');
      ReactDOM.render(React.createElement(Button), domContainer);
    </script>
  </body>
</html>
复制代码

ReactAnd how to implement an event bound?

5, React and achieve JSX

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      class Button extends React.Component {
        render() {
          return (
            <button onClick={buttonHandler}>按钮</button>
          )
        }
      }
      const domContainer = document.querySelector('#app');
      ReactDOM.render(React.createElement(Button), domContainer);
    </script>
  </body>
</html>
复制代码

What is JSX? JSXWhy you can run web in grammar?

summary

In this part point involved are:

Native HTML / JS (1,2)
MVVM frame (3,4)
Babel compilation (5)

Example is very simple, it is best to understand the meaning of each line of code, the latter problem can find information, look at the source code to answer, at least to understand the entry to jQuerythe back of the problem here. VueAnd Reactexamples put here to help understand, you can step by step to learn. The problem has been sorted out and the key points, you can check the information on their own - if necessary, followed by examples of answers will open another ~