liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - イベントの発生原(Event Resource)

jQuery

純粋なjavascriptの場合、異なるブラウザでイベント発生原の取得方法が異なる。 jQeuryは、ブラウザによる取得方法の差異を解消している。

jQeuryのイベント原の属性

  • data : イベントdata
  • pageX : mouseのX座標

  • pageY : mouseのY座標

  • currentTarget : 伝播中のDOM要素

  • delegateTarget : イベント処理関数
  • relatedTarget : イベントに参加したすべてのDOM要素

  • target : イベント発生原

  • timeStamp : イベント生成時刻(1970/01/01からの数字)

  • type : イベント種類

  • which : mouse,keyboardイベントの場合、キー種類

  • isDefalutPrevented() : メソッドよんだか

  • isImmediatePropagationStopped() : メソッドよんだか
  • isPropagationStopped() : メソッドよんだか

  • stopPropagation() : イベント伝播を止める

  • result : イベント後の戻り値

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQueryのイベント発生原 </title>
</head>

<body>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    $(function()
    {
        // 
        var target = $("body>div:first");
        // keydown
        $("body").keydown(function(event)
        {
            switch (event.which)
            {
                // ↓
                case 37:
                    target.offset({
                        left: target.offset().left - 4,
                        top: target.offset().top
                    });
                    break;
                    // ↑
                case 38:
                    target.offset({
                        left: target.offset().left,
                        top: target.offset().top - 4
                    });
                    break;
                    // →
                case 39:
                    target.offset({
                        left: target.offset().left + 4,
                        top: target.offset().top
                    });
                    break;
                    // ←
                case 40:
                    target.offset({
                        left: target.offset().left,
                        top: target.offset().top + 4
                    });
                    break;
            }
        });
    })
    </script>
    <div style="position:absolute;">
        <img src="logo_small.jpg" alt="logo" /></div>
</body>

</html>

f:id:liguofeng29:20160228124813g:plain