はじめに

こんにちは！@70days_jsです。
もう12月ですね。

今日はJavaScriptのイベントを使ってみました。

oncontextmenu
onresize
onerror
onmouseover/onmouseout

今日は44日目。(2019/12/1)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day44.html

やったこと

今日使ったイベントは主に4つです。

oncontextmenu（赤・青色）
onresize（黄色）
onerror（緑色）
onmouseover/onmouseout（すべて）

1. oncontextmenuの部分

oncontextmenuは右クリック時のイベントです。

赤色のボックスでは右クリックを禁止して（falseにする）、赤色の枠の中に文字列を表示するようにしています。

青色のボックスでは右クリックされるとalertが表示されます。

<div id="contextMenu" class="context-menu onmouseover">右クリックをすると・・・？</div>
<div id="contextMenu2" class="context-menu2 onmouseover">右クリックをすると・・・？</div>

let contextMenu = document.getElementById('contextMenu');
let contextMenu2 = document.getElementById('contextMenu2');
contextMenu.oncontextmenu = function () {
    contextMenu.innerHTML = '右クリック不可エリア（不可ではない）';
    return false;
}
contextMenu2.oncontextmenu = function () {
    contextMenu2.innerHTML = ('alertの表示！');
    alert('右クリックをしたな？');
}

これで右クリックを使えなくすることもできますが、JavaScript自体を禁止されたり、ディベロッパーツールでコードを書き換えられたりしたら右クリックができるようになります。

2. onresize

onresizeは画面サイズの変更時のイベントです。

今回は画面サイズが変更されたら横幅の値を表示するようにしています。

<div id="resize" class="resize onmouseover">Displayサイズは・・・？ <br></div>

let resize = document.getElementById('resize');
window.onresize = function () {
    resize.innerHTML += window.innerWidth + ',';
}

window.innerWidthで横幅を取っています。

3. onerror

onerrorは画像読み込み失敗時のイベントです。

gifでは猫の画像を表示していますが、htmlのソースコードには存在しないURLを書いています。

<div id="onerror" class="onerror onmouseover">
    画像が表示されない場合は・・・？<br>
    <img src="day44.png" id="onerrorImage">
</div>

let onerror = document.getElementById('onerror');
let onerrorImage = document.getElementById('onerrorImage');
onerrorImage.onerror = function () {
    onerrorImage.removeAttribute("src");
    onerrorImage.setAttribute('src', 'day31_image/5.jpg');
}

setAttributeで画像が存在するURLを書いています。

4. onmouseover/onmouseout

onmouseoverはマウスが乗った時のイベントです。
onmouseoutはマウスが離れた時のイベントです。

今回は、ボックスにマウスが乗ったらborder-widthを太くして目立つようにしました。
要素の取得はクラスで行いました。


let onmouseover = document.getElementsByClassName('onmouseover');
for (var i = 0; onmouseover.length > i; i++) {
    onmouseover[i].onmouseover = function (e) {
        e.target.style.borderWidth = '.5em';
    }
    onmouseover[i].onmouseout = function (e) {
        e.target.style.borderWidth = '1px';
        console.log('test');
    }
}

ボックスにクラスをつけておき、getElementsByClassNameでクラスを取得します。
for文で回して、e.targetでそれぞれのborder-widthの大きさを変更しています。

メモ

2つのオブジェクト
- ビルトインオブジェクト・・・jsに組み込まれた機能をオブジェクト化（ECMAScript仕様に基づく）、配列、文字列、正規表現など
- ナビゲーターオブジェクト・・・ブラウザ自体の情報、表示に関わる機能をオブジェクト化（ブラウザ独自の実装がされている）

感想

イベントを調べていると、どうもweb業界の闇が見えるなぁと思っていたんですが、イベントはナビゲーターオブジェクトだからブラウザごとにメソッド名・プロパティ名が違って当たり前なんですね。
標準化して欲しいところではありますが、こればかりは時間がかかりそうな気がする・・・。イベント便利なんだけどな。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。