第四章 jQuery中的事件

http://www.cnblogs.com/shuibing/p/4077195.html

1.加载DOM

　　jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，此时可能元素的关联文件未下载完。

　　jQuery中的 load()方法，会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于 JavaScript中的window.onload=function(){...}，该方法需要等网页所有元素都加载完（包括管理文件）。

　　2.事件绑定

　　在文档装载完之后，可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。

　　语法： bind(type,[data],fn);

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-2-3</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("click",function(){
        var $content = $(this).next();
        if($content.is(":visible")){
            $content.hide();
        }else{
            $content.show();
        }
    })
})
</script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-2-4</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("mouseover",function(){
        $(this).next().show();
    });
      $("#panel h5.head").bind("mouseout",function(){
         $(this).next().hide();
    })
})
</script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>
</body>
</html>
复制代码

　　3.合成事件

　　jQuery中有2个合成事件，hover()方法与toggle()方法。

　　hover() 语法：hover(enter,leave);  用来模拟光标悬停事件。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-3-1</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">
$(function(){
    $("#panel h5.head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();   
    })
})
</script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>
</body>
</html>
复制代码

　　toggle()语法：toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-3-3</title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<script type="text/javascript">

$(function(){
    $("#panel h5.head").toggle(function(){
            $(this).next().toggle();
    },function(){
            $(this).next().toggle();
    })
})

/*$(function(){
    $("#panel h5.head").click(function(){
            $(this).next().toggle();
    })
})*/

</script>
</head>
<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>
</body>
</html>
复制代码

　　4.事件冒泡

　　意思就是说，页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-4-1</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        #content
        {
            width: 220px;
            border: 1px solid #0050D0;
            background: #96E555;
        }
        span
        {
            width: 200px;
            margin: 10px;
            background: #666666;
            cursor: pointer;
            color: white;
            display: block;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 为span元素绑定click事件
            $('span').bind("click", function () {
                var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为div元素绑定click事件
            $('#content').bind("click", function () {
                var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为body元素绑定click事件
            $("body").bind("click", function () {
                var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
                $('#msg').html(txt);
            });
        })
    </script>
</head>
<body>
    <div id="content">
        外层div元素 <span>内层span元素</span> 外层div元素
    </div>
    <div id="msg">
    </div>
</body>
</html>
复制代码

　　停止冒泡

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Panel</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        #content
        {
            width: 220px;
            border: 1px solid #0050D0;
            background: #96E555;
        }
        span
        {
            width: 200px;
            margin: 10px;
            background: #666666;
            cursor: pointer;
            color: white;
            display: block;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 为span元素绑定click事件
            $('span').bind("click", function (event) {
                var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
                $('#msg').html(txt);
                event.stopPropagation();    //  阻止事件冒泡
            });
            // 为div元素绑定click事件
            $('#content').bind("click", function (event) {
                var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
                $('#msg').html(txt);
                event.stopPropagation();    //  阻止事件冒泡
            });
            // 为body元素绑定click事件
            $("body").bind("click", function () {
                var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
                $('#msg').html(txt);
            });
        })
    </script>
</head>
<body>
    <div id="content">
        外层div元素 <span>内层span元素</span> 外层div元素
    </div>
    <div id="msg">
    </div>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-4-4</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        #content
        {
            width: 220px;
            border: 1px solid #0050D0;
            background: #96E555;
        }
        span
        {
            width: 200px;
            margin: 10px;
            background: #666666;
            cursor: pointer;
            color: white;
            display: block;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 为span元素绑定click事件
            $('span').bind("click", function (event) {
                var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
                $('#msg').html(txt);
                return false;
            });
            // 为div元素绑定click事件
            $('#content').bind("click", function (event) {
                var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
                $('#msg').html(txt);
                return false;
            });
            // 为body元素绑定click事件
            $("body").bind("click", function () {
                var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
                $('#msg').html(txt);
            });
        })
    </script>
</head>
<body>
    <div id="content">
        外层div元素 <span>内层span元素</span> 外层div元素
    </div>
    <div id="msg">
    </div>
</body>
</html>
复制代码

　　阻止默认行为

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#sub").bind("click", function (event) {
                var username = $("#username").val();  //获取元素的值
                if (username == "") {     //判断值是否为空
                    $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
                    event.preventDefault();  //阻止默认行为 ( 表单提交 )
                }
            })
        })
    </script>
</head>
<body>
    <form action="test.html">
    用户名：<input type="text" id="username" />
    <br />
    <input type="submit" value="提交" id="sub" />
    </form>
    <div id="msg">
    </div>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#sub").bind("click", function (event) {
                var username = $("#username").val();  //获取元素的值
                if (username == "") {     //判断值是否为空
                    $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
                    return false;
                }
            })
        })
    </script>
</head>
<body>
    <form action="test.html">
    用户名：<input type="text" id="username" />
    <br />
    <input type="submit" value="提交" id="sub" />
    </form>
    <div id="msg">
    </div>
</body>
</html>
复制代码

　　5.事件对象的属性

　　jQuery对事件对象常用的属性进行了封装。

　　(1)event.type 可以获取事件的类型

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--   引入jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("a").click(function (event) {
                alert(event.type); //获取事件类型
                return false; //阻止链接跳转
            });
        })
    </script>
</head>
<body>
    <a href='http://google.com'>click me .</a>
</body>
</html>
复制代码

　　(2)event.target 可以获取出发事件的元素

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--   引入jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("a[href=http://google.com]").click(function (event) {
                alert(event.target.href); //获取触发事件的<a>元素的href属性值
                return false; //阻止链接跳转
            });
        })
    </script>
</head>
<body>
    <a href='http://google.com'>click me .</a>
</body>
</html>
复制代码

　　(3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--   引入jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("a").click(function (event) {
                alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标
                return false; //阻止链接跳转
            });
        })
    </script>
</head>
<body>
    <a href='http://google.com'>click me .</a>
</body>
</html>
复制代码

　　(4)event.which 可以在鼠标单击事件中获取鼠标的左中右键，也可以获取键盘键。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!--   引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script>
$(function(){
    $("a").mousedown(function(e){
        alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
        return false;//阻止链接跳转
    })
})
  </script>
</head>
<body>
<a href='http://google.com'>click me .</a>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--   引入jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("input").keyup(function (e) {
                alert(e.which);
            })
        })
    </script>
</head>
<body>
    <input />
</body>
</html>
复制代码

　　6.移除事件

　　unbind([type],[data])方法用来移除事件。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-6-2</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').bind("click", function () {
                $('#test').append("<p>我的绑定函数1</p>");
            }).bind("click", function () {
                $('#test').append("<p>我的绑定函数2</p>");
            }).bind("click", function () {
                $('#test').append("<p>我的绑定函数3</p>");
            });
            $('#delAll').click(function () {
                $('#btn').unbind("click");
            });
        })
    </script>
</head>
<body>
    <button id="btn">
        点击我</button>
    <div id="test">
    </div>
    <button id="delAll">
        删除所有事件</button>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Panel</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').bind("click", myFun1 = function () {
                $('#test').append("<p>我的绑定函数1</p>");
            }).bind("click", myFun2 = function () {
                $('#test').append("<p>我的绑定函数2</p>");
            }).bind("click", myFun3 = function () {
                $('#test').append("<p>我的绑定函数3</p>");
            });
            $('#delTwo').click(function () {
                $('#btn').unbind("click", myFun2);
            });
        })
    </script>
</head>
<body>
    <button id="btn">
        点击我</button>
    <div id="test">
    </div>
    <button id="delTwo">
        删除第二个事件</button>
</body>
</html>
复制代码

　　one(type,[data],fn)方法可以为元素绑定处理函数，当处理函数触发一次后立即删除。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-6-4</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').one("click", function () {
                $('#test').append("<p>我的绑定函数1</p>");
            }).one("click", function () {
                $('#test').append("<p>我的绑定函数2</p>");
            }).one("click", function () {
                $('#test').append("<p>我的绑定函数3</p>");
            });
        })
    </script>
</head>
<body>
    <button id="btn">
        点击我</button>
    <div id="test">
    </div>
</body>
</html>
复制代码

　　7.模拟操作

　　jQuery中可以使用trigger()方法完成模拟操作。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').bind("click", function () {
                $('#test').append("<p>我的绑定函数1</p>");
            }).bind("click", function () {
                $('#test').append("<p>我的绑定函数2</p>");
            }).bind("click", function () {
                $('#test').append("<p>我的绑定函数3</p>");
            });
            $('#btn').trigger("click");
        })
    </script>
</head>
<body>
    <button id="btn">
        点击我</button>
    <div id="test">
    </div>
</body>
</html>
复制代码

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }
        p
        {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').bind("myClick", function (event, message1, message2) {
                $('#test').append("<p>" + message1 + message2 + "</p>");
            });
            $('#btn').click(function () {
                $(this).trigger("myClick", ["我的自定义", "事件"]);
            }).trigger("myClick", ["我的自定义", "事件"]);
        })
    </script>
</head>
<body>
    <button id="btn">
        点击我</button>
    <div id="test">
    </div>
</body>
</html>
复制代码
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shenming/p/4118917.html