1.イベント
HTMLイベントは、HTML要素に発生するものです。
JavaScriptがHTMLページで使用されている場合、JavaScriptはこれらのイベントをトリガーできます。
イベントは通常、関数と組み合わせて使用されるため、イベントの発生によって関数の実行を駆動できます。
1.マウスインおよびマウスアウトイベント
（1）onmouseoverおよびonmouseout
- onmouseover：マウスポインタが要素に移動するとトリガーされます
- onmouseout：マウスポインタが要素の外に移動した後にトリガーされます
（2）onmouseenter和onmouseleave
- onmouseenter：マウスポインタが要素に入ったときにトリガーします
- onmouseleave：マウスポインタが要素を離れた後にトリガーされます
上記の2セットのイベントでマウスの出入りを実現できますが、違いはありますか？
2つの本質的な違いは、mouseenterがバブルしないことです。簡単に言えば、それ自体の子要素の状態の影響を受けません。ただし、マウスオーバーはその子要素の影響を受けます。子要素がトリガーされると、マウスオーバーはバブリングしてその親要素をトリガーします（マウスオーバーのバブリングイベントを防ぐには、mouseenterを使用します）
共通点：両方にサブ要素がない場合、2つの動作は同じですが、両方にサブ要素が含まれている場合、動作は異なります。
2.焦点を合わせたり失ったりする
onfocusフォーカスイベントの取得：マウスカーソルが入力ボックスのフォーカスを取得したときに
onblurをトリガーします。フォーカス喪失イベント：マウスカーソルがフォーカスを失ったときにトリガーします。
3.マウスクリックおよびダブルクリックイベント
onclickクリックイベント：マウスポインタがクリックされたときに
ondblclickをトリガーしますダブルクリックイベント：マウスカーソルがダブルクリックされたときにトリガーします。
4.キーボードのキーを押して持ち上げるイベント
onkeydown：キーボードを押す
onkeyup：キーボードを上げる
5.DOM0およびDOM2イベント
DOM0はイベントをバインドする通常の方法であり、DOM2はイベントを監視する方法です。DOM0レベルのイベント要素は複数のクリックをバインドし、最後に最後のクリックのみを実行します。DOM2レベルのイベント要素は複数のクリックにバインドされており、実行する必要があります。
（1）DOM0イベント
2つのクリックイベントを同じボタンにバインドすると、2番目のイベントのみが実行されます
btn.onclick = function(){
alert(1)
}
btn.onclick = function(){
alert(2)
}
（2）DOM2イベント
2つのイベントを同じボタンにバインドすると、両方のイベントが実行されます
btn.addEventListener(‘click’,function(){
alert(1)
});
btn.addEventListener(‘click’,function(){
alert(2)
});
（3）イベントのバインド解除
DOM0イベントのバインド解除メソッド：btn.onclick = null;
DOM2イベントのバインド解除メソッド：btn.removeEventListener(‘click’,function);
6、イベントオブジェクト（イベント）
イベントオブジェクトはいつ生成されますか？
例：ユーザーが要素をクリックすると、この要素に登録したイベントがトリガーされます。イベントの本質は関数であり、関数の仮パラメーターはイベントオブジェクトを受け取ります。
Eventオブジェクトは、イベントが発生した要素、キーボードボタンの状態、マウスの位置、マウスボタンの状態など、イベントの状態を表します。
トリガーされたイベントの関数では、イベントオブジェクトを受け取ります。オブジェクトを介して、いくつかのパラメーターが必要です。たとえば、イベントが誰に影響を与えるかを知る必要があり、イベントの属性ターゲットを介して取得できます（IE一時的にDonそれについては話さないでください）、またはブラウザのデフォルトの動作を防ぎたい場合は、メソッドpreventDefault（）を使用して防ぐことができます。以下は、イベントオブジェクトのプロパティとメソッドの一部です。
イベントオブジェクトの互換性の書き込み：
7.イベントのバブリングとキャプチャ
（1）イベントバブリング
ユーザーが要素をクリックし、その要素にクリックイベントがある場合、同じイベントがその祖先によってもトリガーされます。このイベントは、要素からDOMツリーの最上位にバブルアップします。このプロセスはイベントバブルと呼ばれます。 。
イベントのバブリングを防ぐ方法：
e.stopPropagation();GoogleとFirefoxのサポート、
window.event.cancelBubble=true;IE固有、Googleのサポート、Firefoxはサポートしていません
（2）イベントキャプチャ
イベントのキャプチャとイベントのバブリングは逆です。つまり、ユーザーがイベントをトリガーすると、イベントのソースがキャプチャされるまで、イベントはDOMツリーの最上位からトリガーされます。
8.イベントソース
イベントでは、現在操作されている要素がイベントソースです。たとえば、Webページ要素のタグにはonclickイベントがあります。クリック時にonclickイベントが発生すると、イベントのソースはタグになります。
イベントソースを取得する：event.target
イベントソースを介して新しい要素にスタイルを追加します。
2、属性
1.カスタム属性
私たちが書くタグは、要素自体の既存の属性を使用できるだけでなく、プログラマーによって作成された属性を追加することもできます。たとえば、次のdivにmoney属性を追加します（独自のdivはありません）。setAttribute(属性，值)プロパティを作成することによって、プロパティをgetAttribute(属性，值)取得することによって。
カスタム属性を削除します。removeAttribute(属性，值)
さらに、プロパティを設定する他の方法があります。
- setProperty ：DOM.style.setProperty（ "Property"、 "Value"）
- cssText ：DOM.style.cssText = "属性：値;属性：値; ...";
- DOM.style。 '属性名' =値;
- Dom.attribute = 'value'：ラベルの既存の属性値を設定します。属性をカスタマイズすることはできません