如何给页面上的按钮绑定一个事件？

计划写一个例子系列来帮助前端新童鞋入坑，同时也梳理一下自己的知识体系。预计有30篇左右，本文是第一篇：如何给页面上的按钮绑定一个事件？文中的代码复制粘贴保存为html文件即可在Chrome里预览~ 这个例子实现的是在页面里有一个按钮，点击后弹出一个 Hello 弹窗。

1、原生实现

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

也可以这样：

<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>
复制代码

这个应该很容易理解，问题是两段 script 里的代码是否可以合并到一起？合并之后放到什么位置？

2、JQuery实现

<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>
复制代码

$方法是如何实现的？.on方法是如何实现的？

3、Vue实现

<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>
复制代码

Vue是如何实现事件绑定的？Vue这个类都做了些什么事情？

4、React实现

<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>
复制代码

React又是如何实现事件绑定的？

5、React和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>
复制代码

什么是JSX？ JSX语法为什么可以运行在web里？

小结

本篇涉及到的内容点有：

原生的HTML/JS（1、2）
MVVM框架（3、4）
Babel编译（5）

例子很简单，最好能理解每一行代码的意义，后面的问题可以通过找资料、看源码来解答，入门至少要理解到jQuery后面的问题这里。Vue和React的例子放在这里是为了帮助理解，可以循序渐进的去学习。已经整理出了问题和关键点，可以自行查资料~如果有必要，例子后面的答案会另开一篇~