Skip to content

jq-04 事件和动画

一、事件对象

在给元素添加事件的函数里,直接传一个形参使用事件对象event,不需要做兼容;

转回原生事件对象:e.originalEvent; 鼠标滚轮事件等需要转回原生

二、事件对象常用的属性

类型

  • type:返回事件类型,click;

  • target:事件源

  • delegateTarget:代理的这个对象,谁调用事件的就是谁(delegate:代表);

  • currentTarget:触发该事件的当前对象;

事件委托的事件时:delegateTarget指向的是父元素,currentTarget指向的是子元素;

直接绑定的事件时:它们两个的值是相等的;

位置属性

在页面上移动:$(document).mousemove

  • pageX,pageY:距离文档的位置(还计算被卷起的高度);

  • clientX,clientY:距离可视窗口的位置;

  • offsetX,offsetY:距离绑定事件元素的位置;

  • screenX,screenY:距离屏幕边缘的位置;

行为

右键:$(document).contextmenu;

  • e.stopPropagation() 阻止事件冒泡(父元素和子元素都设置点击事件,点击子元素会触发父元素);

  • e.preventDefault() 阻止默认行为

  • return false 可以阻止冒泡和默认行为;

键盘事件

  • keydown:按下;

  • keyup:抬起;常用于表单输入框按下数字;

  • keyCode:获取按键的键码值;

  • which: 相当于keyCode获取键码值;

which还可以获取鼠标按键:(1,2,3)代表左中右;需要放在对应的事件当中,click,scroll,contextmenu;

  • 键盘常用:altkey ctrlkey shiftkey
js
$("textarea").keyup(function () {
    $("i").html(40 - $(this).val().length);    //当输入框的按钮抬起时,修改i标签的内容,做到实时更新;
})

三、事件

  1. 把原生的onclick变成click,去掉on,后面直接跟括号函数,不用等号;

    例:$("button").click(function(){});

  2. 事件可以链式调用:写完一个事件后面直接点上另一个事件;

  3. .hover(fn1,fn2);当一个fn时,为移入,两个是移入移出;

  4. 元素.focus();有参数function时,表示元素获得焦点时,要执行的处理函数;

没有参数时,调用focus方法,获得焦点;

blur(),submit(),change(), select()reset();都可以使用;

四、事件处理

事件绑定

  • 绑定一个事件:

    js
    $('div').on('click', function(){})
  • 绑定多个事件:

    js
    $('div').on('mouseover mouseout', function(){})
    // or
    $('div').on({
        click: function(){},
        mouseover: function(){}
    })
  • 自定义事件:

    js
    $('div').on('custom', function(){})
    // 触发自定义事件
    $('div').trigger('custom')
  • 触发事件:

    js
    $('button').trigger('submit')

事件委托

把子元素要做的事交给父元素

js
$('.parent').on('click', $('.children'), function(){})

事件移除

js
$('div').off()

(1)不填参数时,移除页面中的所有事件;

(2)一个参数:填写要移除的具体事件,可以填写命名空间的函数;

(3)二个参数:.off(事件,对应事件函数名);

命名空间

(1)在原生里:将所有的函数放在一个对象里,需要用到哪个函数就对象取值;

(2)jquery:在事件后面加点,后面跟自定义名字,例:click.b;

$("span").off("click.b") 清除事件b;

  1. 只执行一次事件:.one(事件,函数);

五、动画效果

可用方法

基本效果

  • show();显示
  • hide();隐藏
  • toggle();显示或隐藏;

透明度变化

  • fadeIn();透明度变化显示;
  • fadeOut();透明度变化隐藏;
  • fadeTo();指定透明度变到多少,第一个参数时间,第二个参数透明度的值,第三个参数填写其他的;
  • fadeToggle();透明度的显示或消失;

滑动

  • slideUp();收起;
  • slideDown();放下;
  • slideToggle();收起或放下;

可用参数

第一个参数:可以传入时间,单位毫秒,或填写关键字:fast(200),normal(400),slow(600);

第二个参数:linear,动画方式;

第三个参数:函数,用来动画完成执行的回调函数;

例:$("div").show(1000,"linear",function(alert(1)));

六、自定义动画

animate

  1. 第一种语法

    js
    $("div").animate({width:100},1000,"linear",function(){console.log(1)})

    第一个参数:对象,对象里面是变化属性的键值对;

    第二个参数:时间,单位毫秒;

    第三个参数:速度变化方式;linear匀速,默认为swing;

    第四个参数:动画完成的函数;

  2. 第二种语法:

    js
    $("div").animate({width:100},{duration:2000,complete:function(){})

    第一个参数:对象,对象里面写变化属性的键值对;

    第二个参数:对象,动画的额外选项;duration(持续时间),complete(完成执行的函数);

  3. 动画对列

    js
    $("div").animate({width:100},{queue:false}).animate({height:100})

    执行完前一个,再执行后面的;

    queue:false 动画一起执行;

    animate();也可以使用属性值:show,hide,toggle,来代替透明度变化和高度滑动;

  4. 累加、累减动画:使用"+="或"-=";

    js
    $("div").animate({"width":"+=500"})

    每点击一下,加500的宽度;

stop

.stop([clearQueue],[gotoEnd])

如果不填写参数,停止当前动画,如果后面还有动画,则会直接执行后面的动画;

动画停止:true或false;第一个是否清空队列,第二个是否立即完成当前动画;

  • stop(true):清空队列,停止当前动画;

  • stop(false,true);常用于后一个动画需要基于前一个动画结束才执行

  • stop(true,true);停止当前动画并直接到达当前动画的末状态,并清空动画队列;

js
  //用户鼠标移入,清空后面的队列,停止当前动画,再执行当前动画
//如果不是动画对列,不需要加true;
$("div").hover(function(){
    $(this).stop(true).animate({width:500},300).animate({height:500},300)
},function(){
    $(this).stop(true).animate({height:100},300).animate({width:100},300)
})

finish

元素的动画立即完成;

delay

元素.delay(毫秒).动画;元素等过了毫秒值后再开始动画;

七、动画队列中的queue;

  1. css不属于动画,在参于动画队列时,不会在动画队列中排队,会先执行;
  2. queue(function(){}); 需要在函数括号添加个形参,在事件里面调用这个形参;
  3. 除了使用queue强行插入之外,使用回调函数,在前面的标签,作为结束动画执行的内容;

强行插入动画队列,函数完成以后会影响对列下面的动画执行,需要在函数的括号中写个形参,然后在调用这个形参加小括号,调用确保队列剩下的动画正常执行;这个形参是一个函数,相当于queue后面的动画队列的一个集合,需要调用一下;

八、判断元素是否处于动画状态

在使用 animate() 方法的时候,要避免动画积累而导致动画与用户的行为不一致,当用户快速在某个元素上执行 animate() 动画时,就会出现动画积累。解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

js
if(!$(this).is(":animated")){    //判断元素是否正处于动画状态
        //如果当前没有进行动画,则添加新动画
}
也可以:$("div:not(:animated)").animate({ left: "+=20" }, 1000);    //没有在动画的div元素添加动画

$("li").hover(function(){
    if(!$(this).find("div").is(":animated")){   //如果没有在动画就执行动画;
        $(this).find("div").animate({
            "height": "show",
        });
    }
},function(){
    $(this).find("div").animate({
        "height": "hide",
    });
})
$("div:not(:animated)").animate({ left: "+=20" }, 1000);    //没有在动画的div元素添加画

九、函数

递归:在函数中调用自己,需要有一个出口,否则会死循环;

回调:当做参数传递给另一个函数;

闭包:两个函数嵌套,内层函数使用外层函数的变量;

js
$(function(){
    function down(){
        $(this).next().slideDown(down);
    }
    $("div").eq(0).slideDown(down);
})

递归让下一个

高频面试题

● Jquery 如何给新添加的元素绑定事件?

Released under the MIT License.