jquery绑定事件on-jQuery 风暴处理：on() 绑定风暴

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1. 单风暴注册

语法：

其他风暴与原来基本相同。如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

2. on()绑定storm的事件处理

on() 方法将一个或多个风暴处理程序绑定到匹配的元素。

语法：

1.事件：以空格分隔的一种或多种事件类型，例如“click”或“keydown”。

2.选择器：元素的子元素选择器。

3. fn：回调函数，是绑定到元素头的监听函数。

on()方法优点1：

① 绑定多个风暴，并多个处理风暴处理程序。

②如果风暴处理程序相同：

注：多个风暴之间用空格分隔；

on()方法优点2：

操作可以通过风暴来分配。 事件赋值的定义就是将原本添加到子元素头部的storm绑定到父元素头部，也就是将storm赋值给父元素。

上面代码的含义：ul绑定了click点击，但是触发对象是li。 点击li后jquery绑定事件on，会有一个点击在丈夫的脸上，还有一个点击在女儿的头上，所以这个程序就会被执行。

在此之前，有bind()、live()、delegate()等方法来处理storm绑定或storm赋值。 请在最新版本中使用 on 代替它们。

on()方法的优点3：on()可以将storm绑定到动态生成的元素上

并且 click() 无法将storms绑定到动态生成的元素上

案例：发布微博案例点击发布按钮，动态创建一个小lijquery绑定事件on，将内容放入文本框和删除按钮中，添加到ul中点击的删除按钮中，即可删除当前微博消息。

    
    
    
        * {
            margin: 0;
            padding: 0
        }
        ul {
            list-style: none
        }
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        ul {
            width: 450px;
            padding-left: 80px;
        }
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        input {
            float: right;
        }
        ul li a {
            float: right;
        }
    
    
    
        $(function () {
            // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
            $(".btn").on("click", function () {
                var li = $("
");
                li.html($(".txt").val() + " 删除");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })
            // 2.点击的删除按钮，可以删除当前的微博留言li
            // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
            //     alert(11);
            // })
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove();
                });
            })
        })
    


    

        微博发布
        
        发布
        

        
    

参考资料： 黑马