javascript 特定要素にmouseover（マウスが乗った時）とmouseleave（マウスが外れた時）

Every Qiita #5
のんびり独学初学者の毎日投稿チャレンジ 5日目
今回は・・・
自作コミュニティアプリ開発で追加した要素の親要素に対して操作したかった時の備忘録です。

##追加した要素にイベントを付与したい
javascriptで付与した要素にマウスが乗った時と外れた時のイベントを付与していきます。

index.js

  xhr.onreadystatechange = function(){
    // xhrクライアントの状態がDONE=4　操作完了で発火
      if(this.readyState == 4 && this.status == 200){
       この中にイベントファンクションを記載
  }

今回は画像をs3に保存し、保存した画像を随時表示させたいので、上記のレスポンスが成功した時の関数の中に記述していきます。
readyState=4とstatus=200のif文の中に記載すると追加した要素にイベントを付与することができます。
###マウスが乗った時の処理

index.js

img_element.addEventListener("mouseover", function(){
// マウスオーバーした親要素に削除テキスト、透過css判定id付与 
  this.parentNode.setAttribute("id","del_img");
  const del_btn = document.createElement("h1");
  del_btn.setAttribute("id","del_btn");
  del_btn.innerHTML = "×";
  this.parentNode.appendChild(del_btn);
});

####解説：

• img_elementは画像を表示する際に新しく追加したimg要素になります。反映後の構造は以下の通りになります。

index.html

  <div id="del_img（新しく追加したid）">
    <h1 id="del_btn(新しく追加したid）">✖️</h1>
    <img 新しく追加した要素(img_element)>
  </div>

• this.parentNode: imgの親要素にidを付与することで、クリックアクションで選択要素を削除することが可能です。cssでホバー時のアニメーションを指定することも可能です。

###マウスが外れた時の処理

index.js

  img_element.addEventListener("mouseleave", function(){
  // del_imgの削除(透過css)
  document.getElementById("del_img").removeAttribute("id");
  // del_btnの削除(削除テキスト)
  document.getElementById("del_btn").remove();
  });

####解説

• mouseleaveイベントで指定した要素がマウスを外れた時に発火します。
• mouseoverで付与した要素を取り除くことで、初期設定の状態に戻ります。

元々あるhtml要素の取得は他記事で多くありますが、javascriptで付与した要素に関しては付与した関数の中にイベントを同時に設定する必要がありますので、もし同じような境遇の方いらっしゃいましたら参考にして頂ければと思います。