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、4つのパラメータがあります.
a:イベントタイプ
b:セレクタ(有無)子孫の選択
c:データAnything任意のデータ型データ(有無可)
d:コールバック関数
2、onはイベントを一括処理することができる:複数のイベントは1つの関数処理を採用する;注意イベントとイベントの間は【スペース】で区切られています

 $('.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方式でバインドする場合、3番目のパラメータは書かなくてもよい

$('.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)3つのパラメータがあります.
a、イベントタイプ
      b、eventData
c、コールバック関数

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