jQuery事件 -- 笔记 - 图2review0615

  1. $(document).ready(function() {
  2.     $(document).keypress(function(event) {
  3.         console.log(event);
  4.     });
  5.     $('input').keypress(function(event) {
  6.         console.log(event);
  7.     });
  8.     $('a').click(function() {
  9.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  10.     });
  11.     $('a').dblclick(function() {
  12.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  13.     });
  14.     $('a').mousedown(function() {
  15.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  16.     });
  17.     $('a').mouseup(function() {
  18.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  19.     });
  20.     $('a').mouseenter(function() {
  21.         index = $(this).index();
  22.         swiper();
  23.     });
  24.     $('a').mouseleave(function() {
  25.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  26.     });
  27.     $('a').hover(function() {
  28.         $('img').eq($(this).index()).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  29.     }, function() {
  30.         $('img').eq($(this).index()).css({ 'opacity': '0' }).siblings().css({ 'opacity': '1' });
  31.     });
  32.     $('nav').mouseover(function() {
  33.         console.log($(this));
  34.     });
  35.     $('nav').mouseout(function() {
  36.         console.log($(this));
  37.     });
  38.     $('nav').mousemove(function() {
  39.         console.log($(this));
  40.     });
  41.     $('div').scroll(function() {
  42.         console.log($(this));
  43.     });
  44.     $(document).keydown(function(event) {
  45.         if (event.keyCode == 37) {
  46.             index = index > 0 ? -- index : $('a').length - 1;
  47.         } else if (event.keyCode == 39) {
  48.             index = index < $('a').length - 1 ? ++ index : 0;
  49.         } else {
  50.             return false;
  51.         }
  52.         swiper();
  53.     });
  54.     $(document).keyup(function() {
  55.         console.log($(this));
  56.     });
  57.     $(document).keypress(function(event) {
  58.         console.log(event);
  59.     });
  60.     $(window).resize(function() {
  61.         console.log($(this));
  62.     });
  63.     $('.formElement').focus(function() {
  64.         console.log('我获得焦点啦！O(∩_∩)O');
  65.     });
  66.     $('.formElement').blur(function() {
  67.         console.log('我失去焦点啦！5555555……');
  68.     });
  69.     $('.formElement').change(function() {
  70.         console.log('我正在发生改变！O(∩_∩)O');
  71.     });
  72.     $('.formElement').select(function() {
  73.         console.log('我被选中了！O(∩_∩)O');
  74.     });
  75.     // 提交表单
  76.     $('input[type=button]').click(function() {
  77.         $('form').submit();
  78.     });
  79.     // 阻止表单提交
  80.     $('form').submit(function() {
  81.         // ......
  82.         return false;
  83.     });
  84.     // 提交表单时做一些我们所需要做的事情(多用于表单验证)
  85.     $('form').submit(function() {
  86.         var inputValue = $('input[type=text]').val();
  87.         if (inputValue !== 'www.imooc.com') {
  88.             return false;
  89.         }
  90.     });
  92.     // $(document).on('mouseenter', 'a', function(event) {
  93.     //     event.stopPropagation();
  94.     //     index = $(this).index();
  95.     //     swiper();
  96.     // });
  97.     // $(document).on('keydown', function(event) {
  98.     //     event.stopPropagation();
  99.     //     if (event.keyCode == 37) {
  100.     //         index = index > 0 ? --index : $('a').length - 1;
  101.     //     } else if (event.keyCode == 39) {
  102.     //         index = index < $('a').length - 1 ? ++index : 0;
  103.     //     } else {
  104.     //         return false;
  105.     //     }
  106.     //     swiper();
  107.     // });
  108.     // bind、delegate、live
  109.     var index = 0;
  110.     var mouseEvent = function(event) {
  111.         event.stopPropagation();
  112.         if ($(this)[0].nodeName == 'A') {
  113.             index = $(this).index();
  114.         } else {
  115.             return true;
  116.         };
  117.         swiper();
  118.     };
  119.     var keyEvent = function(event) {
  120.         event.stopPropagation();
  121.         if (event.keyCode == 37) {
  122.             index = index > 0 ? --index : $('a').length - 1;
  123.         } else if (event.keyCode == 39) {
  124.             index = index < $('a').length - 1 ? ++index : 0;
  125.         } else {
  126.             return true;
  127.         }
  128.         swiper();
  129.     }
  130.     var events = {
  131.         mouseenter: mouseEvent,
  132.         keydown: keyEvent
  133.     };
  134.     $('a').add(document).on(events);
  135.     // // 要绑定的事件
  136.     // function flash() {
  137.     //     $('.button').show().fadeOut('slow');
  138.     // }
  139.     // // 事件绑定
  140.     // $('.bind').click(function() {
  141.     //     $(document).on('click', '.obj', flash)
  142.     //     .find('.obj').text('点击按钮有效果');
  143.     // });
  144.     // // 取消事件绑定
  145.     // $('.unbind').click(function() {
  146.     //     $(document).off('click', '.obj', flash)
  147.     //     .find('.obj').text('这个按钮点击没有效果');
  148.     // });
  149.     // // 绑定一次事件
  150.     // $('.one').click(function() {
  151.     //     $(document).one('click', '.obj', flash)
  152.     //     .find('.obj').text('这个按钮可以点击一次');
  153.     // });
  154.     var swiper = function() {
  155.         $('img').eq(index).css({ 'opacity': '1' }).siblings().css({ 'opacity': '0' });
  156.     }
  157.     var init = function() {
  158.         index = 0;
  159.         swiper();
  160.     }
  161.     init();
  162. });

review0616-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery绑定事件</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 要绑定的事件
            function flash() {
                $('.button').show().fadeOut('slow');
            }
            // 事件绑定
            $('.bind').click(function() {
                $(document).on('click', '.obj', flash)
                .find('.obj').text('点击按钮有效果');
            });
            // 取消事件绑定
            $('.unbind').click(function() {
                $(document).off('click', '.obj', flash)
                .find('.obj').text('这个按钮点击没有效果');
            });
            // 绑定一次事件
               $('.one').click(function() {
                $(document).one('click', '.obj', flash)
                .find('.obj').text('这个按钮可以点击一次');
            });
        });
    </script>
</head>
<body>
    <button class="obj">这个按钮点击没有效果</button>
    <button class="bind">绑定</button>
    <button class="unbind">取消绑定</button>
    <button class="one">绑定一次</button>
    <div class="button" style="display: none;">第一个按钮被点击了！</div>
</body>
</html>