ページ上のボタンにイベントをバインドするには？

彼はピットに新しい靴のフロントエンドを支援する一連の例を記述するだけでなく、彼らの知識を整理していく予定です。約30を持っていることが予想され、これが最初である：ページ上のボタンにイベントをバインドする方法？コピーしたコードのテキストを貼り付け、この場合、Chromeのhtmlファイルのプレビューとして保存することができます - それはこんにちは、ページ上のボタンを持っているポップ・ポップをクリックすることで達成します。

達成することが本来の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>
复制代码

これは、問題は、コード内の2つのスクリプトが一緒にマージすることができるかどうかで理解しやすいすべきですか？どのような位置に合併した後？

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、達成リアクト

<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、反応し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なぜあなたは文法でウェブを実行できますか？

概要

関与この部分のポイントでは、次のとおりです。

ネイティブのHTML / JS（1,2）
MVVMフレーム（3,4）
バベルのコンパイル（5）

例は、それがコードの各行の意味を理解するのが最善である、非常に簡単ですが、後者の問題は、少なくともにエントリを理解するために、答えるためにソースコードを見て、情報を見つけることができるjQueryここでの問題の背中を。VueそしてReact例は、あなたが学ぶためにステップバイステップすることができ、理解を助けるためにここに置きます。〜回答の例に続いて、必要であれば、別のものを開きます-問題が整理されており、重要なポイントは、あなたが自分で情報を確認することができます