dispatch event

別の要素のイベントを発火させるアレ。

let.hatelabo.jp
アイコン付きのスターに変更する Bookmarklet を手直ししてて、ちょっとはまったので備忘がてら。

DEMO

mouseover + mouseout

event
──→

SOURCE

    var o2 = document.getElementById("o20151222_2");
    o2.addEventListener("mouseover", function(e) {
        e.target.style.backgroundColor = "red";
    }, false);
    o2.addEventListener("mouseout", function(e) {
        e.target.style.backgroundColor = "";
    }, false);

    var forwardMouseEvent = function(e) {
        /*
            Deprecated : MouseEvent.initMouseEvent
            https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent

        var newEvent = document.createEvent("MouseEvents");
        newEvent.initMouseEvent(e.type, e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null);
        */
        var newEvent = new MouseEvent(e.type, {
                bubbles: e.bubbles,
                cancelable: e.cancelable,
                view: e.view, detail: e.detail,
                screenX: e.screenX, screenY: e.screenY,
                clientX: e.clientX, clientY: e.clientY
            });
        var o2 = document.getElementById("o20151222_2");
        o2.dispatchEvent(newEvent);
    };

    var o1 = document.getElementById("o20151222_1");
    o1.addEventListener("mouseover", forwardMouseEvent, false);
    o1.addEventListener("mouseout", forwardMouseEvent, false);

雑感

Internet Explorer 独自の fireEvent メソッドの方が扱いは簡単だったけど、副作用がどこにあるか分からない window.event の中身をいじるよりは健全なのだとは思う。

関係ないこと

embed で埋め込んだ Hatena::Let のページ、地味すぎる (´・ω・`)