JQ 事件监听

一、普通事件绑定

1、语法：jq对象.事件类型（回调函数）

  eg：

 $('p').click(function () {
         console.log(222222222);
     });

2、注意：

  ①使用jq 一定要进行引入 否则 $ is not defined

  ②jq操作的元素是批量的

  ③没有兼容性问题

  ④对同一个jq对象进行相同类型事件绑定 则 执行的顺序 和绑定的顺序相同

  ⑤jq对事件的绑定支持链式绑定

  ⑥当不同种事件类型进行绑定时 满足事件触发的条件 就会执行 和 绑定的顺序无关

  ⑦jq事件进行绑定时 没有on

 $('.box').click(function () {
        console.log('第二次绑定');
    }).click(function () {
        console.log('第一次绑定');
    }).mouseenter(function () {
      // console.log(this);
        //原生js
        this.style.backgroundColor = 'red';
    }).mouseleave(function () {
        //console.log(this);
        //jq
        $(this).css('backgroundColor','');
    });

二、on事件绑定

1、有四个参数：

    a:事件类型

    b:选择器 （可有可无）选择后代

    c:数据 Anything 任何数据类型数据 （可有可无）

    d:回调函数

2、on可以对事件进行批量处理 ：多个事件 采用一个函数处理；注意事件与事件之间使用 【空格】 分隔

 $('.box').on('click mouseleave', function () {
     $(this).css('background-color','red');
     })

3、on 事件绑定可以传入数据

  （1）只指定最后一个函数处理，则必须写最后一个函数

 $('.box').on('click mouseleave',666, function (event) {
     console.log(event.data);
     $(this).css('background-color', 'red');
     })

  （2）如果进行个性化定制，则最后一个函数不用写

 $('.box').on({
     'click': function (event) {
     console.log(event.data);
     $(this).css('background-color', 'red');
     },
     'mouseleave': function (event) {
     console.log(event.data);
     $(this).css('background-color', 'yellow');
     }
     },666);

4、支持选择器对后代的选择：一定切记是后代元素

$('.box').on('click','.p1', function () {
     $(this).css('background-color','red');
     });

5、使用off解绑事件，语法：jq对象.off()

  （1）没有参数，会解绑所有的事件

  （2）可以解绑指定的事件

$('button').click(function () {
     $('.box').off('click');
     });
     $('.box').on({
     'click': function () {
     $(this).css('background-color', 'red');
     },
     'mouseleave': function () {
     $(this).css('background-color', 'yellow');
     }
     });

6、one()：事件绑定只有一次效果

$('.box').one('click',function () {
            console.log('I am one');
         })

三、bind 事件绑定：jq.bind()；对事件进行批量处理

  （1）bind进行事件绑定时 事件类型之间 使用 空格 分隔

  （2）bind 可以对 事件进行个性化的定制 将 事件 和处理函数封装为json

  （3）bind 中含有3个参数 当采用 2 方式 绑定时 则 第三个参数 可以不写

$('.box').bind({
        'click': function (event) {
            //  console.log('我被单击了');
            $(this).css('background-color', 'red');
        },
        'mouseenter': function (event) {
            //console.log('鼠标进入div了');
            $(this).css('background-color', 'blue');
        },
        'mouseleave': function (event) {
            console.log(event.data)
            // console.log('鼠标离开div了');
            $(this).css('background-color', 'green');
        }
    }, {'userName': '李白'});

  （4）获取传入的默认值，需要使用event获取

$('.box').bind('click',{'userName':'李白'}, function (event) {
            console.log(event.data.userName);
        })

  （5）有三个参数：

      a、事件类型

      b、eventData

      c、回调函数

$('.box').bind('click',{'userName':'李白'}, function (event) {
        console.log(event.data.userName);
    })