JQuery中的事件

最新推荐文章于 2021-02-21 19:42:27 发布

木易一

最新推荐文章于 2021-02-21 19:42:27 发布

阅读量182

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90609825

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery里面的事件分为键盘事件、鼠标事件、窗口事件；

在原生JS中写事件的基本方法有直接绑定和设置监听；

JQuery中结构层和代码层分离，可以进行链式操作；

一、事件绑定

1.事件的对象

<script>
 $("#btn1").click(function(event){
        //事件对象event
        var e=event.target;//通过事件来获取当前操作元素的节点
        console.log(e);
    });
</script>

2.普通方法绑定事件

前面的示例中，我们给某个元素绑定一个事件，例如，给Button绑定点击事件时，我们是这样实现的：

$(function(){

$("#btn").click(function(){

//执行代码

})

前面说道，JQuery可以进行链式操作，如下代码：

<script>
    $("#btn").click(function(){
        console.log(1);
    }).mouseenter(function(){
        console.log(2);
    }).mouseleave(function(){
        console.log(3);
    });
</script>

3.bind()方法

除了上面绑定事件的写法，在JQuery中，还可以使用bind()方法进行事件的绑定，bind()方法的功能为每个选择元素的事件绑定处理函数，语法格式为bind(type，[data],fn) ，其中参数type为一个或多个类型的字符串，如"click"或"change"，也可以自定义类型；参数data是作为event.data属性值传递给事件对象的额外数据对象；参数fn是绑定到每个选择元素的事件中的处理函数。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script>
    //通过bind()方法绑定事件
    //写法一
    $("#btn1").bind("click",function(){
        console.log(1)
    });
    //写法二
    $("#btn2").bind("click",btnmethod);//注意调用函数时不带括号
    function btnmethod(){
        console.log(2);
    }
    //bind()方法中的data参数
    $("#btn3").bind("click",2,function(e){
        //中间参数的data是额外传给event对象上的data数据
        console.log(e);
        console.log(event);
    });
</script>
</body>
</html>

上面写法二的示例需要注意，bind("cilck",XXX方法)，这里调用方法只写名称不带括号

bind()方法的data参数的使用，是额外传参给event对象上的一个data属性的数据，上面示例的输出e结果截图如下：

4.一次绑定多个事件

如果要在一个元素中绑定多个事件，可以将事件用空格隔开，如下代码所示：

5.特殊的绑定 on()方法

写法和bind相同，bind()可以实现的on()都可以实现

区别：on可以进行事件的委托 bind不可以

在一个页面上，有多个块，每个块的class不同，但是块中的子元素的class是相同的。这个时候你要给content1下的子元素的child绑定事件，用bind肯定是不可以的，因为这样会对所有的child元素绑定事件。但是用on就可以给特定唯一父元素下的子元素绑定事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul class="content1">
    <li class="child">你好</li>
</ul>
<ul class="content2">
    <li class="child">hello</li>
</ul>
<ul class="content3">
    <li class="child">哈哈哈</li>
</ul>
<script>
//    $(".child").bind("click",function () {
//        console.log(2)//bind绑定事件
            //点击每一个li都会输出
//     })
    $(".content1").on("click",".child",function () {
        console.log(1) ;//on绑定子元素事件
        //只有点击content1下的li元素会输出
    })
</script>
</body>
</html>

二、清除事件

unbind()方法，如果不带参数，指事件全部移除，带参数指的是移除当前的指定事件

<script>
    $("#btn1").bind("click  mouseleave",function(e){
        if(e.type=="click"){
            console.log("你好")
        }
        else{
            console.log("hello")
        }
    }).unbind("mouseleave");//清除事件
</script>

上面代码中，当输出一次hello后移除了mouseleave事件

三、事件切换

jQuery中有两个方法用于事件的切换，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。一个方法是hover(),另一个方法是toggle()

1.hover()

功能是当鼠标移动到所选元素上面时，执行指定的第一个函数，当鼠标移出这个元素时，执行指定的第二个函数，语法格式为hover(over,out)

<script>
    //常规写法
//        $(".b1").mouseover(function (){
//            console.log(1);
//        }).mouseleave(function (){
//            console.log(2);
//        });
    //hover()写法
    $(".b1").hover(function (){
        console.log(1);
    },function (){
        console.log(2);
    });
</script>

2.toggle()

在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。toggle()方法的功能是每次单击后依次调用函数，注意是依次调用，语法格式为toggle(fn,fn2,...)

eg: 图片切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.7.min.js"></script>
    <style>
        body{
            font-size: 13px;
        }
        .img{
            border: 1px solid black;
            padding: 3px;
        }
    </style>
</head>
<body>
<img class="img" src="img/13.jpg"/>
<script>
    $(function(){
        $(".img").toggle(function(){
            $(".img").attr("src","img/10.jpg");
            $(".img").attr("title",this.src);
        },function(){
            $(".img").attr("src","img/11.jpg");
            $(".img").attr("title",this.src);
        },function(){
            $(".img").attr("src","img/14.jpg");
            $(".img").attr("title",this.src);
        })
    })
</script>
</body>
</html>

四、一次性事件

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，语法格式为one(type,[data],fn)

其中参数type为事件类型，即需要触发什么类型的事件；参数data为可选参数，表示作为event.data属性值传递给事件的额外数据对象；fn为绑定事件时所要触发的函数

<script>
  $(".b1").one("mouseenter",function(){
        console.log(1);
    });
</script>

五、指定事件

trigger()方法的功能是在所选择的元素上触发指定类型的事件。其语法格式为trigger(type,[data])

其中参数type为触发事件的类型，参数data为可选项，表示在触发事件时，传递给函数的附加参数

<script>
    $("#txt").focus(function (){
        $(this).css("color","red");
    });
    $("#txt").trigger("focus");
    console.log(1);
</script>

六、自定义事件

示例：

<script>
    $("#txt").bind("mytxt",function(e,a,b,c){
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3
    });
    $("#txt").trigger("mytxt",[1,2,3]);
</script>

木易一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中的事件

JQuery里面的事件分为键盘事件、鼠标事件、窗口事件；在原生JS中写事件的基本方法有直接绑定和设置监听；JQuery中结构层和代码层分离，可以进行链式操作；一、事件绑定1.事件的对象<script> $("#btn1").click(function(event){ //事件对象event var e=event.target;...
复制链接

扫一扫