概要

const elem = document.querySelector('.testElem')

elem.addEventListener('click',function(){
	console.log('hello!');
})
 // #1
.....

const testTag = document.createElement('button')
testTag.onclick=function(){
	console.log('hello!');
}
 // #2

<button class='testElem' onclick='(e) => {console.log('hello!')}'

 // #3

今まで、テキストで位置決めを始めたようです.
いきなりコードで始まりました
この文章を書いた理由は、

'댓글 달기'와 같은 element 추가가 필요한 경우에
해당 댓글 element에 event가 붙어있어야하는 경우
위의 3가지 방법 중 어떤 것이 효율적이고, 지향되어야하는가?

疑問符があります.
実は直感的で気持ちがいいelementonclick=~と書いてありました
たくさんの書類を調べた後、考えを変えるところがあったので整理しました.
まずは、冒頭のリンクから.
コメントリンク
1. https://www.geeksforgeeks.org/difference-between-addeventlistener-and-onclick-in-javascript/
//違いの簡単な紹介
2. https://newbedev.com/addeventlistener-vs-onclick
//'Why?'の時刻の説明

要素をElementに適用する方法

便宜上、self closureは後続コードに適用されます.

Inline event

<button onclick='alert('안녕!')'/>

これはhtmlページで使用する簡単な方法です.
初めて勉強したときに最初に出会ったのかもしれません.

onclick attribute

const elem = document.createElement('button')
elem.onclick = function(){
	alert('안녕!');
}
parentNode.appendChild(elem);

JSを使用する場合、Inlineイベントと同じ操作を作成できます.
方法は異なりますが、結果は同じです.

addEventListener

const elem = document.querySelector('.testElem');
elem.addEventListener('click',function(){
	alert('안녕!');
})

htmlの要素をロードし、イベントを要素に登録します.
動作は同じですが、htmlでは見えず、方法も違います.

What is difference?

htmlのように見えますか?見えませんか。

前述したように、Inline eventが適用される場合
開発者ツールを開き、有効なアクションを確認します.

しかし、JSで宣言すれば、それを防ぐことができる.

Duplicate?

elem.onclick = function(){
	console.log('안녕! 첫 번째 함수야!")
}

elem.onclick = function(){
	console.log('안녕! 두 번째 함수야!")
}

同じインラインイベントを登録する場合、
最後に登録したイベントが実行されます.
すなわち,1つのイベントに複数のタスクを同時に持つことはできない.

ただし、addEventListenerの場合

elem.addEventListener('click',function(){
	console.log('안녕! 첫 번째 함수야!")
}

elem.addEventListener('click',function(){
	console.log("안녕! 두 번째 함수야!")
}

2つのコンソールがありますすべてのログが実行されます.

したがって、ここでonclickは1つの動作しか必要ありません.
複数のインタラクションが必要かもしれません!そう言ったとき.
addEventListenerが必要だと思います.

Event Capturing

elem.addEventListener('click',function(){},false)

addEventListenerは、3番目のパラメータを使用してイベントのキャプチャを制御します.
booleanパラメータは存在し、デフォルトはfalseです.
たとえば...

<div>
 <p>
  <button>
 </p>
</div>

ボタンラベルに上記形式のtrue値がある場合、
div->p->ボタンの順にキャプチャします.
Bubblingはbutt->p->divの順に続きます.
falseではキャプチャが有効になっていません.
ボタン->p->divシーケンスはbundlingのみをトリガーします.
What is Bubbling, Capturing?

Bubbling : Event가 상위 요소로 전파됩니다.
 -> 아래에서 위로!
Capturing : Event가 하위 요소로 전파됩니다.
 -> 위에서 아래로!

Difference Summary

Why addEventListener?

私の結論は以下の通りです.

onclick보다 addEventListener를 가까이하자!

Reason 1:各種イベント

前述したように、onclickは1つのタスクしか登録できません.
ただし、addEventListenerは、1つの動作に複数の動作を付与することができる.

Reason 2 : html stress

<button onclick=''/>
<button onclick=''/>
<button onclick=''/>
<button onclick=''/>
<button onclick=''/>
<button onclick=''/>

たとえば、各ボタンにclickイベントが必要な場合は、上記のようにします.
htmlに1つずつ書いていくと…
最初のロードは時間がかかり、読み取りが悪い.

Reason 3 : XSS Risks

Cross Site Scripting
 :: 페이지에 스크립트를 삽입해 공격하는 기법
 :: 보여지는 태그를 확인해 작업을 변조할 수 있고
 :: 경우에 따라 악의적인 URL을 삽입시켜 악성 코드를 다운받게 하거나
 :: 쿠키, 세션 정보 등을 갈취할 수 있고
 :: 서버의 권한을 취득할 수도 있습니다.

ハッカー技術にはXSS、サイト間スクリプトが含まれています.
特徴は以下の通り.
たとえばbutton onclickに論理を挿入すると、その論理はキャプチャセッションによって転送されます.
ユーザがボタンをクリックすると、ユーザ全体の情報が送信されます.
もちろん、これらの攻撃は確かにサーバ側で処理されています.
デフォルトでは、スクリーン構成による予防も正しいです.
これらのセクションでは、現在適用されているスクリプトを簡単に表示できます.
インラインEvent Handlerの使用は避けるべきだと思います

Simple solution

function XSSCheck(str, level) {
    if (level == undefined || level == 0) {
        str = str.replace(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-/g,"");
    } else if (level != undefined && level == 1) {
        str = str.replace(/\</g, "&lt;");
        str = str.replace(/\>/g, "&gt;");
    }
    return str;
}

JSの防御方法は2種類あり、
1つ目は、上記の正規表現置換方法を使用して入力値をフィルタすることです.
2つ目の方法は、セキュリティ・エキスパートを使用するか、リポジトリをインポートすることです.
注意:https://doctorson0309.tistory.com/601

Performance?

パフォーマンスの測定はブラウザに依存すると言われています.
注意:https://stackoverflow.com/questions/26008243/is-it-more-efficient-to-use-addeventlistener-or-onclick-for-performance
たとえば、ChromeではaddEventListenerの方が速いです.
FireFoxはonClickの方が速いと考えています.
したがって、内部の作業が頻繁であるかによっては、パフォーマンスの比較が困難になる可能性があります.

の最後の部分

Inline Event Handlerは書きやすく、コード行が少ない.
しかし、何度も実習をした後、私が感じたのは
Web上で発生するイベントは、単純な匿名関数だけではありません.
例えば、DBをサーバに要求し、特定のフィルタデータのみを取得する…の下に表示されます.
いくつかの複雑な動作があります.
AngularまたはReact.

<button onclick={doSomething()}/>

インラインイベントのように見えますが、バックグラウンドではより複雑なコードに変換されます.
要するに、htmlやVanilla JSで呼ばれるインラインイベントのように動作しません.
だから.実際、addEventListenerを使うことはありませんが.
だからインラインEvent Handlerは使わないことにしました