【JavaScript】要素をホバーした時のイベントを登録する関数( プロトタイプ拡張 )

2018年11月24日
JavaScript

イベントを登録する時の記述を楽にするため作成した。

前提

下記の関数を定義済みの想定とする。

コード

Element.prototype.registerOnHover = function( onStarted, onEnded ) {
    if ( isSmartPhoneOrTablet() ) {
        const OPTION = canUsePassive() ? { passive: true } : false;

        this.addEventListener( 'touchstart' , onStarted , OPTION );
        this.addEventListener( 'touchend'   , onEnded   , OPTION );
    } 
    else {
        this.addEventListener( 'mouseover'  , onStarted );
        this.addEventListener( 'mouseout'   , onEnded   );
    }
};

使い方

Element型のオブジェクトから、引数に「ホバーを開始した時のイベント」と「ホバーを終了した時のイベント」を指定し、呼び出すだけ。

const ELEMENT = document.getElementById( 'element' );

ELEMENT.registerOnHover( 
	function() { /* 要素のホバーを開始した時の処理 */ },
	function() { /* 要素のホバーを終了した時の処理 */ },
);