JavaScriptによるDOMのイベント解析（コード付き）

イベントとは何ですか？イベントって何の役に立つの？この記事では、JavaScript での DOM のイベント分析について説明し、イベントの概念とイベントの使用法を紹介します。

イベント

1. イベントとは

ユーザーがHTMLページのボタンをクリックしたり、ユーザーがユーザー名とパスワードを入力したりするなど、プログラムのユーザー動作をJSに知らせます

 <script>
        var button = document.getElementById(&#39;btn&#39;);
//        获取按钮元素
        button.onclick = function () {
//        事件绑定
            console.log(&#39;你已点了我&#39;);
        }
    </script>

2. イベントの登録
JS関数が指定されたイベントに関連付けられ、バインドされた関数がイベントのハンドルになります
イベントが発生するとバインドされた関数が呼び出されます

HTMLのevent属性要素

は、実際の登録イベント関数を表します
このメソッドは、HTMLの構造および動作から効果的に分離されていません

<button>按钮</button>
<script>
    function mylove() {
        console.log(&#39;你已点了我&#39;);
    }
</script>

DOMオブジェクトのevent属性

THMLページ要素にDocumentオブジェクトを配置します
関数

<button>按钮</button>
<script>
    var btn = document.getElementById(&#39;btn&#39;);
    btn.onclick = mylove;
    function mylove() {
        console.log(&#39;你已点了我&#39;);
    }
</script>

イベント リスナー

addEventLisener() メソッドを使用して、要素がイベント リスナーを追加することを示すためにこのメソッドを呼び出します

body>
<button>按钮</button>
<script>
    var btn = document.getElementById(&#39;btn&#39;);
    btn.attachEvent(&#39;onclick&#39;,function () {
        console.log(&#39;XXX&#39;);
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

以上がJavaScriptによるDOMのイベント解析（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。