jQuery学习笔记_06

jQuery事件发展历程

//用原生的js给div注册单击事件
//原生js注册相同的事件,后面的会把前面的覆盖

document.getElementById("one").onclick=function(){
     alert('单击事件');
 };
document.getElementById("one").onclick=function(){
 alert('单击事件.啦啦啦');
 };

jQuery

给同一个元素注册同样的事件，后面的不会把前面的给覆盖

$('#one').click(function(){
         alert('单击事件');
     })
     $('#one').click(function(){
         alert('单击事件，lalala');
     })

jQuery注册事件的发展历程

1.简单事件绑定 click()
//不支持同时注册，也不支持动态注册

 $('div').click(function(){
       console.log("鼠标点击事件");
   });
    $('div').mouseenter(function(){
     console.log("鼠标移入事件...");
 })

2.bind方式注册事件
//支持同时注册，也不支持动态注册

    $('div').bind({
         mouseenter:function(){
           console.log("鼠标移入事件...");
       },
     click:function(){
          console.log('鼠标单击事件');
      }
   })

3.delegate注册事件-原理是事件冒泡
//支持同时注册，也支持动态注册

 $('body').delegate('div',{
        mouseenter:function(){
            console.log('鼠标移入事件');
        },
        click:function(){
            console.log("鼠标单击事件");
        }
    })

jQuery1.7之后，jQuery用on统一了所有事件的处理方法

on简单注册事件
不支持动态注册的

$('div').on('click',function(){
        console.log('我是点击事件...');
    })

//on委托注册
//支持动态注册的

 $('body').on('click','div',function(){
        console.log("单击事件.");
    })
 $('body').on('click','div,span',function(){
    console.log("单击事件.");
   })

off()
jQuery用on来注册事件，就用off来解绑事件
off不给参数就是解绑所有事件
off(‘click’)给参数解绑指定的事件

 //给注册事件按钮，注册单击事件
        $('#btn1').on('click',function(){
            //给div注册事件
            $('#one').on({
                'click':function(){
                    console.log("单击事件");
                },
                'mouseenter':function(){
                    console.log("鼠标移入事件");
                }
            });
        });

//移除事件
      $('#btn2').on('click',function(){
          //给div解绑事件
          //$('#one').off();//解绑所有事件
          $('#one').off('click');//解绑click事件
      })

trigger()事件触发
//事件触发trigger
//代码的方式来触发事件
//可以使用他来触发自定义事件

 //给div注册一个单击事件
 $('#one').on('click',function(){
 console.log('单击事件...');
 });

//给按钮注册事件
 var i=0;
 $('#btn1').on('click',function(){
        i++;
        if(i==3){
        //条件满足，触发div的单击事件
        //事件触发,用代码的方式触发事件
       $('#one').click();
       $('#one').trigger('click');
 }
 })

  //给div注册一个自定义事件
        $("#one").on('linge',function(){
            console.log("拉拉,我是林哥事件");
        });

  //那我现在就是要触发他怎么办？就可以使用触发器trigger
      $('#btn2').on('click',function(){
       var res=confirm('请问林哥帅吗');
     if(res){
//触发自定义的linge事件
     $('#one').trigger('linge');
            }
      })

第六课…