zoukankan      html  css  js  c++  java
  • jquery事件绑定

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title></title>
            <script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    
            <style type="text/css">
                #box {
                    background-color: red;
                    width: 100px;
                    height: 100px;
                }
            </style>
    
            <script type="text/javascript">
                $(document).ready(function() {
                    // 单击事件
                    $(document).click(function() {
                        alert("click")
                    });
    
                    // 不推荐 被on取代
                    $(document).bind("click mouseenter", function() {
                        alert("bind")
                    });
    
                    // 性能高 支持动态创建的元素
                    // 第一个参数 要绑定的事件元素
                    // 第二个参数 事件类型
                    // 第三个参数 事件处理函数
                    $(document).delegate("#box", "click", function() {
                        alert("delegate")
                    });
    
                    // 最现代的方式
                    // 第一个参数 要绑定的事件名称 可以多个 可以是标准事件或者自定义事件
                    // 第二个参数 执行事件的后代元素
                    // 第三个参数 传递给处理函数的数据 事件触发的时候通过event.data来使用
                    // 第四个参数 事件处理函数
                    $(document).on("mouseenter", "#box", function() {
                        alert("on")
                    });
    
                    $(document).on("mouseenter", "#box", {
                        "name": "furong"
                    }, function(event) {
                        alert(event.data.name)
                    });
                });
            </script>
        </head>
        <body>
            <div id="box">
            </div>
        </body>
    </html>

    image

  • 相关阅读:
    8月8号
    8月10号
    8月5号
    8月7号
    8月4号
    8月3号。
    特殊符号 sort_wc_uniq命令 tee_tr_split命令
    管道符和作业 shell变量 环境变量
    shell 基础 history table键 通配符 输入输出重定向
    yum 源 地址的修改 源码包安装
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/13861627.html
Copyright © 2011-2022 走看看