欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jq事件

程序员文章站 2022-07-14 22:52:01
...

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 是 鼠标