文章目录

  • 事件
  • 1、页面加载
  • 2、事件绑定
  • （1）单事件绑定
  • （2）多事件绑定
  • （3）事件绑定方法的对比
  • 3、事件切换
  • 4、事件模拟


事件

1、页面加载

DOM提供了load事件用于叶面积在完毕之后执行机制，jQuery提供了ready()方法实现相似功能。但DOM中的load事件与jQuery中的ready()方法具有以下三种区别：

  • DOM中的load事件：
  • 没有任何简写形式
  • 当HTML页面加载完毕之后出发load事件
  • 一个HTML页面仅允许存在一个load事件
  • jQuery中的ready()方法：
  • 具有简写形式
  • 当DOM节点树加载完毕之后调用ready()方法
  • 一个HTML页面允许存在多个ready()方法

jQuery中的ready()方法：示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载（jQuery）</title>
    <script src="../jquery-1.12.4.js"></script>
    <script>
/*
        jQuery提供了ready()方法——三种写法
            作用：实现了类似于window.onload事件的功能
*/
    // 写法一：
        /*$(document).ready(function () {
            console.log($('#btn'));
        });*/

    // 写法二
        /*$().ready(function () {
            console.log($('#btn'));
        });*/
    // 写法三----平常用法
        $(function () {
            console.log($('#btn'));
        });
    </script>

</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>

2、事件绑定

（1）单事件绑定

jQuery提供了bind()方法完成事件绑定功能。

jQuery提供了unbind()方法完成事件解绑定功能。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定与解绑</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
<script>
    /*
        bind(type,data,callback)方法 - 绑定事件
            *参数
                *type - 表示绑定的事件名称（注意：没有on）
                *data -作为event.data属性传递给事件对象的额外数据对象
                *callback - 表示绑定时间内的处理函数
    */
    function click1() {//为按钮绑定点击事件
        console.log('this is function')
    }
    function click2() {//为按钮绑定点击事件
        console.log('this is function too')
    }
    $('#btn').bind('click',click1);
    $('#btn').bind('click',click2);
    /*
        unbind(type,data,callback)方法 - 解绑定事件
            *参数
                *type - 表示绑定的事件名称（注意：没有on）
                *data -作为event.data属性传递给事件对象的额外数据对象
                *callback - 表示绑定时间内的处理函数
            *情况
                *如果传递事件名称的话 - 解绑定该事件的所有处理函数
                *如果传递事件名称和指定的处理函数 - 解绑该事件的指定处理函数
    */
    $('#btn').unbind('click',click1)
// -----------------------------------------------------------
/*
    bind()与undind()中的data参数---用法并不唯一
     * data参数的值->利用event事件对象的data属性进行接收
     * 特点：改参数的数据内容只能在时间的处理函数中被使用——低耦合
*/
    // var obj = {a:'张无忌'};
    $('#btn').bind('click',{a:'张无忌'},function (event) {
        console.log(event.data);
        // console.log(obj);
    });
</script>
</html>

（2）多事件绑定

多事件绑定同样适用bind()方法完成事件绑定功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多事件的绑定与解绑</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        #title{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
        ul{
            list-style: none;
            padding: 0;
            display: none;
        }
        li{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="title">菜单</div>
    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
    </ul>
</body>
<script>
    /*鼠标悬停事件
        * mouseover - 表示鼠标悬停在指定元素上
        * mouseout - 表示鼠标从指定元素上移开
    */
    /*写法一：
    $('#title').bind('mouseover',function () {
        $('ul').css('display','block');
    });
    $('#title').bind('mouseout',function () {
        $('ul').css('display', 'none');
    });
    */

    // 写法二---链式操作：
   /* $('#title').bind('mouseover',function () {
        $('ul').css('display','block');
    }).bind('mouseout',function () {
        $('ul').css('display', 'none');
    });*/
    //写法三：多事件绑定
    $('#title').bind('mouseover mouseout',function () {
       if ($('ul').is(':hidden')){
           $('ul').css('display','block');
        }else {
           $('ul').css('display', 'none');
       }
    });
</script>
</html>

上述示例代码效果图如下所示：

jQuery发送请求成功后刷新页面 jquery加载完成事件_jQuery

（3）事件绑定方法的对比

jQuery发送请求成功后刷新页面 jquery加载完成事件_jQuery_02

3、事件切换

jQuery提供了hover()方法模拟鼠标悬停事件效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切换</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        #title{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
        ul{
            list-style: none;
            padding: 0;
            display: none;
        }
        li{
            width: 80px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="title">菜单</div>
<ul>
    <li>北京</li>
    <li>天津</li>
    <li>南京</li>
</ul>
</body>
<script>
   // jQuery提供了hover(over,out)方法
    $('#title').hover(function () {
        $('ul').css('display','block');
    },function () {
        $('ul').css('display', 'none');
    });

</script>
</html>

4、事件模拟

jQuery提供了trigger()方法用于模拟触发器匹配元素绑定的事件。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件模拟</title>
    <script src="../jquery-1.12.4.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
<script>
    // 绑定事件 - 由用户进行触发，调用处理函数
    $('#btn').bind('click',function () {
        console.log('this is button');
    });
    // 模拟用户触发事件
    $('#btn').trigger('click');
</script>
</html>