JQuery学习笔记（3）事件处理

最新推荐文章于 2021-12-26 18:16:14 发布

朱海涛的博客

最新推荐文章于 2021-12-26 18:16:14 发布

阅读量111

点赞数

分类专栏： jQuery 文章标签： JQuery事件

本文链接：https://blog.csdn.net/qq_40770950/article/details/84994177

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JQuery提供了四种事件绑定方式，bind（），live（），delegate（），on（）

1、bind（event，date，function）方法为匹配元素添加一个或者多个时间处理器

event：必须参数项，添加到元素的一个或者多个事件。如click()，dbclick()等

date:可选参数项，设计需要传递的参数

function：必须参数项，当绑定事件发生时，需要执行的函数

示例Demo:

           $(function(){
               $(".btn-test").bind("click",function(){
                   $(".container").slideToggle();
               });
           })
       $(function(){
           $(".btn-test").bind("mouseout click",function(){
               $(".container").slideToggle();
           });
       })
       $(function(){
           $(".btn-test").bind({
               "mouseout":function(){
                   alert("鼠标移开事件");
               },
               "click":function() {
                   alert("鼠标点击事件");
               }
           });
       })

2 .live(event，data，function)该方法为当前或未来的匹配元素添加一个或者多个事件处理程序。

JQuery1.9以上版本已删除该方法，一般通过on（）代替

3.delegate(childSelector，event，data，function)

适合于当前的元素或未来的元素，如由脚本创建的新元素等。

demo：

$(function (){
               var i=4;
               $("#btn").click(function(){
                   $("ul").append("<li>列表项目"+ i++ +"</li>");
               })
               $("ul").delegate("li","click",function(){
                   alert(this.innerHTML);
               });
           })

可以发现新添加li列表同样被事件绑定

4.on（event，childselector，data，function）

event：必须参数项，添加到元素的一个或者多个事件。如click()，dbclick()等

childselector 可选参数项，一般为调用对象的子元素

data:可选参数项，设计需要传递的参数

function：必须参数项，当绑定事件发生时，需要执行的函数

5.one（event，date，function）一次性时间，用法参考bind（）

二、注销事件

unbind（），die（），undelegate（），off（）分别对应bind（），live（），delegate（），on（）

三、常用事件方法

1.toggle（speed,[easing],[fn]）隐藏与显示

speed为可选参数，表示隐藏显示的速度，

easing可选参数，用来表示切换效果如slow ，linear

fn可选参数，定义在动画完成时执行的函数

2.hover()鼠标悬停事件

朱海涛的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记（3）事件处理

JQuery提供了四种事件绑定方式，bind（），live（），delegate（），on（）1、bind（event，date，function）方法为匹配元素添加一个或者多个时间处理器event：必须参数项，添加到元素的一个或者多个事件。如click()，dbclick()等date:可选参数项，设计需要传递的参数function：必须参数项，当绑定事件发生时，需要执行的函数...
复制链接

扫一扫