[解決済み] "event "は非推奨ですが、代わりに何を使うべきですか?
質問
ファウンドコードで"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
関数は、渡された単一の引数がマウスの移動イベントであると既に仮定しているので、変更の必要なくイベントリスナーとして動作し続けることができます -- マウスが移動するたびに、唯一の引数として渡された関心のあるイベントで呼び出されます。
関連
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScript版sleep()とは?)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。