jQuery事件

jquery事件的绑定方式

为页面元素绑定事件,即对于指定页面元素,当某个事件发生后,执行指定动作。jQuery 提供可以绑定的事件有: blur, focus, focusin, focusout, load, resize, scroll, unload, click,dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, change, select,submit, keydown, keypress, keyup 等。

  1. jquery标准的绑定方式

    • jq对象.事件方法(回调函数);
  2. on绑定事件/off解除绑定

    • jq对象.on("事件名称",回调函数)
    • jq对象.off("事件名称")。如果off方法不传递任何参数,则将组件上的所有事件全部解绑。

标准绑定方式示例:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script  src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(function () {
                //获取name对象,绑定click事件
                $("#name").click(function () {
                    console.log("点击")
                });

                //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
    /*            $("#name").mouseover(function () {
                    console.log("鼠标来了...")
                });
                $("#name").mouseout(function () {
                    console.log("鼠标走了...")
                });*/

                 //简化操作,链式编程
                 $("#name").mouseover(function () {
                     console.log("鼠标来了...")
                 }).mouseout(function () {
                     console.log("鼠标走了...")
                 });

                $("#name").focus();//让文本输入框获得焦点
                //表单对象.submit();//让表单提交
            });
        </script>
    </head>
    <body>
        <input id="name" type="text" value="绑定点击事件">
    </body>
    </html>

on/off绑定和解绑事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script  src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.使用on给按钮绑定单击事件  click
            $("#btn1").on("click",function () {
                console.log("我被点击了。。。")
            }) ;

            //2. 使用off解除btn按钮的单击事件
            $("#btn2").click(function () {
                //解除btn1按钮的单击事件
                //$("#btn1").off("click");
                $("#btn1").off();//将组件上的所有事件全部解绑
            });
        });
    </script>
</head>
<body>
    <input id="btn1" type="button" value="on">
    <input id="btn2" type="button" value="off">
</body>
</html>

绑定动态添加的元素,我们在实际开发的时候会利用javascript对DOM进行动态的添加,如果要绑定这些动态添加的元素事件时,需要使用on并将绑定的元素传入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>

<ul id="city">
    <li id="bj">北京</li>
    <li id="tj">天津</li>
    <li id="sh">上海</li>
</ul>
<input id="btn1" type="button" value="添加广州">
</body>
<script>
    $(function () {

        //对于动态新增的li无效
        $("li").click(function () {
            console.log("点击")
        });

        //对于动态新增的li有效
        $("ul").on("click", "li", function () {
            console.log("点击");
        });

        //动态新增一个li元素
        $("#btn1").click(function () {
            $("#city").append("<li id='gz'>广州</li>")
        });

    });


</script>
</html>