jQuery事件对象，对象拷贝（jQuery禁止默认行为，阻止冒泡，禁止右键）

1.事件对象

  语法：element.on(events,[selector],function(event){})

  首先，先准备一个盒子，并为他绑定点击事件：

  <div></div>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script>
   $(function () {
      $('div').on('click', function () {
        $(this).css('backgroundColor', 'red');
      })
    })
  </script>

   然后，我们打印其事件对象：

    $('div').on('click', function (event) {
        $(this).css('backgroundColor', 'red');
        console.log(event);
    })

   

   可以在控制台看到事件对象的各种信息，例如：鼠标点击时的位置等。

  阻止默认行为： event.preventDefault  |  return false

  例如：禁止鼠标右键     （结果：鼠标在粉色盒子中无法右键，但在其他区域可以）

 $('div').on('contextmenu', function (event) {
    event.preventDefault();
})

   或者：  （结果也是一样的）

$('div').on('contextmenu', function (event) {
    return false;
})

  阻止冒泡：

  比如：我现在有两个盒子，一个大盒子，里面装了一个小盒子：

  <div class="big">
    <div class="small"></div>
  </div>
  <style>
    .big {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .small {
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  </style>

   我希望，点击小盒子，小盒子变成红色，点击大盒子时，大盒子变成绿色。

  <script>
    $(function () {
      $('.big').on('click', function () {
        $(this).css('backgroundColor', 'yellowgreen')
      })
      $('.small').on('click', function () {
        $(this).css('backgroundColor', 'red');
      })
    })
  </script>

  但是，当我点击小盒子之后，不仅小盒子会变色，大盒子也会：

   这是由于事件冒泡，小盒子的点击事件同时向上一层触发了大盒子的点击事件，此时，我们阻止小盒子的点击事件冒泡。 

$('.small').on('click', function (event) {
   $(this).css('backgroundColor', 'red');
   event.stopPropagation();
})

 2.对象拷贝

语法：$.extend([deep],target,object1,[objectN])

• deep : 为true则为深拷贝，为false则为浅拷贝  （不写，默认为浅拷贝）
• target : 要拷贝的目标对象
• object1 : 待拷贝的第一个对象
• 浅拷贝是把被拷贝对象复杂数据类型的地址拷贝给目标对象，修改目标对象是会影响被拷贝对象的

  <script>
    $(function () {
      var obj = {
        uname: '小花',
        sex: '女',
        foodarr: ['苹果', '香蕉', '葡萄']
      }
      var obj1 = {};
      $.extend(obj1, obj);
      obj1.foodarr[0] = '西红柿';
      console.log(obj);
      console.log(obj1);
    })
  </script>

   拷贝后，修改obj1的内容，发现obj的也同时发生变化

  我们将拷贝方式换成深拷贝：

$.extend(true,obj1, obj);

   obj的内容不会发生变化。