jquery事件

jquery事件机制

java script中已经学习过了事件，jquery对javascript事件进行了封装，增加并扩展了事件处理机制，jquery不仅提供了更加优雅的事件处理语法，而且极大的增强事件处理能力

$(function () {  
 //用原生的js给div注册单击事件.  
 //原生js注册相同的事件,后面的会把前面的给覆盖.  
 // document.getElementById("one").onclick = function () {  
 // alert('单击事件');  
 // };  
 // document.getElementById("one").onclick = function () {  
 // alert('单击事件.啦啦啦');  //只会显示这个
 // };  
   //jQuery  
 //给同一个元素注册同样的事件,后面的不会把前面的给覆盖.  
 // $('#one').click(function () {  
 // alert('单击事件');  //前
 // });  
 // $('#one').click(function () {  
 // alert('单击事件,lallal ');//后  
 // });  

//这是一前一后不是同时注册
 -----------------------------------------------------------------  
 //jQuery注册事件的发展历程. (了解)  
   //1.简单事件绑定 click();  
 //不支持同时注册,也不支持动态注册.  
 // $('div').click(function () {  
 // console.log("鼠标单击事件");  
 // });  
 // $('div').mouseenter(function () {  
 // console.log("鼠标移入事件...");  
 // });  

  //-------------------------------------------------------------------------------------  
 //给按钮设置点击事件,创建一个div.  
 $('#btn').click(function () {  
 var $divNew = $('<div class="two"></div>');  //新创建的也就是动态注册，出来的新的div是没有事件的
 $('body').append($divNew);  
 });  
 //--------------------------------------------------------------------------------
     //2. bind方式注册事件  
 //支持同时注册,也不支持动态注册.  
 // $('div').bind({  
 // mouseenter: function () {  
 // console.log("鼠标移入事件...");  
 // },  
 // click: function () {  
 // console.log("鼠标单击事件");  
 // }  
 // });  

//mouseenter和click事件同时在bind里面，这是同时注册
     //3.delegate注册委托事件-原理是事件冒泡.  

$('.parentbox').delegate('p','click',function(){      //第一个参数selector，要绑定的事件的元素。第二个参数：事件的类型。第三个：事件处理函数。

//为.parentbow下面所有的p标签绑定事件

})
 //支持同时注册,也支持动态注册.  
 // $('body').delegate('div',{    //给div的父亲body注册事件，触发div时由于事件冒泡就触发父亲body的事件
 // mouseenter: function () {  
 // console.log("鼠标移入事件");  
 // },  
 // click: function () {  
 // console.log("鼠标单击事件");  
 // }  
 // });  
       //4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式。  就不用上面三个来注册了。
   //4.1 on简单注册事件.  

//$(selector(父元素)).on('click（什么事件）',function(){}（事件执行程序）);
 //不支持动态注册的.  
 // $('div').on('click', function () {  
 // console.log("我是单击事件...");  
 // });  
     //4.2 on委托注册  
 //支持动态注册的.  
 $('body'(父元素)).on('click（什么事件）','div,span（能触发事件的子元素）', function ()（事件执行程序） {  
 console.log("单击事件."); });

//事件委托原理

var ul = document.querySelector('#ul');

ul.onclick = function(e){

//console.log(e.target.tagName);

if(e.target.tarName.toLowerCase() ==='li'){

console.log(e.target);

}}

案例（动态添加和删除）

 事件解绑off（）

 

.one {  width: 200px;   height: 200px;   border: 1px solid red;   }  
 <input type="button" value="注册事件" id="btn1"/>   <input type="button" value="解绑事件" id="btn2"/> <br/><br/>   <div class="one" id="one"></div> 

$(function () {  
 //jQuery用on来注册事件,那就用off来解绑事件.  
 //off()不给参数就是解绑所有的事件.  
 //off('click')解绑指定的事件.  
   //1.注册事件.  
 $('#btn1').on('click', function () {  
 //给div注册事件.  
 $('#one').on({  
 'click': function () {  
 console.log("单击事件");  

 },  
 'mouseenter': function () {  
 console.log("鼠标移入事件");  
 }  });  });  
     //2.移除事件.  
 $('#btn2').on('click', function () {  
 //给div解绑事件.  
 //$('#one').off();//解绑所有事件.  
 $('#one').off('click');//解绑click事件.  
 });  
   }); 

事件触发trigger（触发器）

.one {   width: 100px;   height: 100px;   border: 1px solid red;   margin-top: 100px;   } <input type="button" value="按钮" id="btn1"/>   <input type="button" value="按钮2" id="btn2"/>   <div id="one" class="one"></div> 

$(function () {  
 //事件触发 trigger.  
 //a.代码的方式来触发事件.  
 //b.可以使用他来触发自定义事件.  
     // //1.给div注册一个单击事件.  
 // $('#one').on('click', function () {  
 // console.log("单击事件....");  
 // });  
 //  
 // //2.给按钮注册事件.  
 // 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('请问林哥帅吗');  //comfirm：显示一个对话框，对话框上显示文本，该方法用于显示一个带有指定消息和确定及取消按钮的对话框，点击确定时返回true，点击取消时返回false，所以要用res来接收返回值
 if(res){  
 //触发自定义的事件.  
 $('#one').trigger('linge');  
 }   });}); 

jquery事件对象

<div id="one" class="one">  <input type="button" value="我是按钮" id="btn"/>   <br/><br/>   <a href=" ">百度一下，你就知道</a >   </div> 
$(function () {  
 //1.什么是事件对象.  
 //注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息  
 //比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息....  
 //jQuery中用事件参数e来获取.  //e就是event 但为了方便可以简写为e
 //jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.  
 $('#one').on('click', function (e) {  
 //console.log(e);  
     //2.事件对象中有常用的三个坐标.  
 // console.log("screenX"+ e.screenX +" : " + e.screenY);//触发事件那一点距离 屏幕最左上角的值  
 // console.log("clientX"+ e.clientX +" : " + e.clientY);//触发事件那一点距离 可视区左上角的值  
 // console.log("pageX"+ e.pageX +" : " + e.pageY);//触发事件那一点距离 页面左上角的值  
     //3.  
 alert("我是div的单击事件.");  
   });  
     //3.给按钮注册一个单击事件.  
 // $('#btn').on('click', function (e) {  
 // alert('我是按钮的单击事件');  
 // e.stopPropagation();//阻止事件冒泡.  
 // });  
   //4.给a标签注册一个单击事件.  
 // $('a').on('click', function (e) {  
 // alert('我是a标签的单击事件....');  
 // // //阻止事件冒泡  
 // // e.stopPropagation();  
 // // //阻止默认行为-阻止a标签的跳转.  
 // // e.preventDefault();  
 //  
 // //既能阻止事件冒泡,又能阻止默认行为.  
 // return false;  
 // });  
     //5.给页面注册键盘按下事件.  
 $(document).on('keydown', function (e) {  
 //e.keyCode能获取按的是那个键.  
 console.log(e.keyCode);  
 });  
   }); 

案例（按键变色）