はじめに
イベントリスナーは、慣れないと、むずかしく感じます。今でも、そうですが、まして、初心者であれば、なおさらだと思います。
そこで、ひとつの例ですが、こんな読み方がありますというサンプルです。
サンプルのコード
このコードは、ページで、スクロールするときのイベントリスナーです。スクロールするたびに、ここへ来ますが、その時に、ページの最下位に来た時をチェックしています。最下位に、来た時に、'#overlayAd'というセレクターを削除しています。
//スクロールイベントリスナーを追加します。
window.addEventListener("scroll", () => {
//スクロールすると、ここのコードを実行します。
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const fullHeight = document.documentElement.scrollHeight;
//最下位をチェック
if (scrollTop + windowHeight >= fullHeight) {
console.log("最下段に到達");
alert("#overlayAdを削除 "+$("#overlayAd").length);
$("#overlayAd").remove();
}
});
詳細解説
このコードは、一番外側でスクロールのリスナーを登録するためのコードです。実際のリスナー処理は、この中に記述します。
1番目の引数で、'スクロールイベント'を意味する'scroll'文字を記述します。
2番目の引数で、イベント処理を記述します。
//
window.addEventListener("scroll", () => {
});
具体的なリスナー処理
const scrollTop = window.scrollY;
const windowHeight = window.innerHeight;
const fullHeight = document.documentElement.scrollHeight;
//
if (scrollTop + windowHeight >= fullHeight) {
console.log("最下段に到達");
alert("#overlayAdを削除 "+$("#overlayAd").length);
$("#overlayAd").remove();
}
このコードは、スクロールイベントが発火したとき、ここへ来ます。ここで、ページの最下位をチェックしています。
最下位であれば、"#overlayAd"というセレクター(要素)を削除しています。
そのコードがこれです。
$("#overlayAd").remove();
この"#overlayAd"セレクターは、yahoo! JAPANページでは、広告を表示しています。
実は、このコードは、yahoo! JAPANニュースページの広告を削除するプラグインコードの一部です。
広告を削除するには、このようなコードを広告毎に実行する必要があります。
あとがき
この記事は、初心者向けのイベントリスナーの書き方についての説明を行うために記述しました。それは、自分自身の経験をもとにしています。自分も、リスナーの登録、実行に関しては中々つかめずに苦労したからです。
登録したのに、発火しないとか、同じリスナーが何度も繰り返し発火してしまうとか、様々な不具合に遭遇したからです。中々、一筋縄には行かないのがリスナー登録、実行です。
最近、ようやく、その要領がつかめてきました。要領をつかむと、コードの作成や動作の確認もスムーズに行きます。
中でも、リスナーが効かないという時は、対象の要素が未表示の時で、その時は、リスナーを登録できません。
大抵のミスは、この原因でした。特に、画像などは、確実に表示されていることを確認後に、リスナー登録をすべきです。その確認も目視でなく、プログラムコードで確認します。
うまく、説明できませんでしたが、追々、補足、修正して行きたいと思います。