1. ホーム
  2. javascript

[解決済み] "event "は非推奨ですが、代わりに何を使うべきですか?

2022-02-18 18:56:55

質問

ファウンドコードで"event"が使われているものを使っています。動作はするのですが、代わりに何を使用すべきかを知りたいです。

私は初心者プログラマーで、足りない概念があります。この場合、私はウェブで見つけたコードを使っています。 https://codepen.io/galulex/pen/eNZRVq

PhpStormは、onmousemove="zoom(event)"が非推奨であることを表示しています。消してみましたが、そのように動作しません。eventの代わりに何を使えばいいのか知りたいです。

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</figure>

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

解決方法は?

グローバル" event WHATWG が後方互換性の名の下に遡及してこの変数を定義するまで、実際の権威によって正式に指定されることなく、Microsoft が Internet Explorer で最初に実装し、多くの一般的なユーザーエージェントでサポートされてきました。 イベント という注意書きが添えられています。

<ブロッククオート

ウェブ開発者は、代わりに イベント オブジェクトをイベントリスナーに渡すことで、よりポータブルなコードになります。この属性はワーカーやワークレットでは利用できません。 シャドウツリー .

ですから、あなたのユースケースが属する幅広いクラスの問題に対する慣用的な解決策は、その要素またはその祖先にイベントリスナーを付けることです。 addEventListener 関数を使用し、リスナーに明示的に渡されたイベントオブジェクトを使用します。

具体的な使用例としては、仮に figure は、あなたの井戸を指しています。 figure 要素、イベントリスナー( zoom ) は、次のように添付することができる。

figure.addEventListener("mousemove", zoom);

を使用しているため zoom 関数は、渡された単一の引数がマウスの移動イベントであると既に仮定しているので、変更の必要なくイベントリスナーとして動作し続けることができます -- マウスが移動するたびに、唯一の引数として渡された関心のあるイベントで呼び出されます。