<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> 事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .divBtn {
    position: absolute;
    top: 250px;
  }

</style>

<body style="height: 2000px;">

<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class='divBtn'>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听, 例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给.out绑定点击监听(用两种方法绑定) 
   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
   3. 点击btn1解除.inner上的所有事件监听
   4. 点击btn2解除.inner上的mouseover事件

   */
   $(function(){
    // 1. 给.out绑定点击监听(用两种方法绑定) 
    //  $('.out').click(function(){
    //    console.log('click-one');
    //  });

    //  $('.out').on('click',function(){
    //    console.log('click-two');
    //  })

    // 2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
    $('.inner').on('mouseenter',function(){
      console.log('mouseenter');
    }).on('mouseleave',function(){
      console.log('mouseleave');
    })

    $('.inner').on('click',function(){
       console.log('click-two');
     })


    // $('.inner').on('mouseover',function(){
    //   console.log('mouseover');
    // }).on('mouseout',function(){
    //   console.log('mouseout');
    // })

    // $('.inner').hover(function(){
    //   console.log('hover-enter');
    // },function(){
    //   console.log('hover-leave');
    // })

  //  3. 点击btn1解除.inner上的所有事件监听
      // $('#btn1').click(function(){
      //   $('.inner').off()
      // })
  //  4. 点击btn2解除.inner上的mouseover事件
  // $('#btn1').click(function(){
  //       // $('.inner').off('click')
  //       // $('.inner').off('click mouseover')
  //     })
   
   })
</script>
</body>
</html>