jq事件

1.jq事件处理

on() :用于绑定事件;

off():事件解绑;

trigger()/triggerHandler():事件触发;

1.事件处理on()绑定事件

1.可以绑定多个事件;

//绑定多个事件 $('div').on({ 
mouseenter:function(){
 $(this).css('background','skyblue'); },
  click:function(){ 
  $(this).css('background','purple'); },
   mouseleave:function(){ 
   $(this).css('background','blue'); } });
    //如果事件相同的话 $('div').on('mouseenter mouseleave',function(){ 
    $(this).toggleClass('current');
     })

2.可以事件委派操作,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素;

//把事件绑定在ul身上,点击li会把事件冒泡给ul, 
$('ul').on('click','li',function(){ alert(111); }) 

3.动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件

// on可以给未来动态创建的元素绑定事件
 $('ul li').click(function(){
  alert(111111); }) 
  var li = $('<li>动态添加的</li>'); 
  $('ol').append(li);

1.事件处理off()解除绑定事件

off()方法可以移除通过on()方法添加的事件处理程序

	 //事件解绑off $('div').off(); 
	 //这个是解除了div身上的所有事件 $('div').off('click'); 
	 //这个是解除div身上的点击 $('ul').off('click','li');
	  //one()只触发一次,就不在触发 	
	  	$('p').one('click',function(){ alert(111); })

3.事件处理trigger()自动触发事件

//1.元素.事件 $('div').click(); 
//会触发元素的默认行为 
// 2.元素.triggle('事件') $('input').trigger('focus'); 
// 3.元素.triggerHandler('事件'); 就是不会触发元素的默认行为 
$('div').triggerHandler('click'); $('input').on('focus', function () { $(this).val('hello world'); })

2.事件的切换

1.hover([over,]out)

 $(".block").on("mouseover mouseout",function (){
            console.log(1);
        })
       $(".block").hover(function (){
           //over
           console.log("鼠标悬停");
       },function (){
           //out
           console.log("鼠标离开");
       });

3.事件的封装方法

//blur([[data],fn])
//change([[data],fn])
//click([[data],fn])
//dblclick([[data],fn])
//error([[data],fn])1.8-
//focus([[data],fn])
//focusin([data],fn)
//focusout([data],fn)
//keydown([[data],fn])
//keypress([[data],fn])
//keyup([[data],fn])
//mousedown([[data],fn])
//mouseenter([[data],fn])
//mouseleave([[data],fn])
//mousemove([[data],fn])
//mouseout([[data],fn])
//mouseover([[data],fn])
//mouseup([[data],fn])
//resize([[data],fn])
//scroll([[data],fn])
//select([[data],fn])
//submit([[data],fn])
例：

 //$(".block").click(100,function (e){
        //    console.log("单击", e.data);
        //}).mousedown(function (){
        //    console.log("鼠标按下");
        //}).mouseenter(function (){
        //    console.log("鼠标进入");
        //}).mouseleave(function (){
        //    console.log("鼠标离开");
        //});

事件的执行参数

//eve.currentTarget //当前点击的目标元素
//eve.data //事件传递的数据
//eve.delegateTarget1.7+ //在事件委托中 获取委托的元素
//eve.isDefaultPrevented() //返回值true/false 是否使用过preventDefault
//eve.isImmediatePropag…()
//eve.isPropagationStopped() //返回值true/false 是否使用过stopPropagation
//eve.namespace
//eve.pageX
//eve.pageY
//eve.preventDefault() 阻止事件的默认行为
//eve.relatedTarget
//eve.result
//eve.stopImmediatePro…()
//eve.stopPropagation() 阻止事件冒泡
//eve.target 执行事件的目标元素
//eve.timeStamp 执行的事件 ms
//eve.type 类型
//eve.which 键盘上的ascii值 1 是 鼠标