jquery 事件处理on

Xu___.___

于 2020-08-24 12:08:09 发布

阅读量214

点赞数

文章标签： jquery html javascript

本文链接：https://blog.youkuaiyun.com/weixin_49884163/article/details/108196712

版权

1.on可以绑定1个或者多个事件处理程序

<div></div>
<script>
$("div").on({
                mouseenter: function() {
                    $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "blue");
                }
            });
</script>

2.on可以实现事件委托（委派）

<ul>
        <li>123</li>
        <li>123</li>
       
</ul>
<script>
$("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
</script>

click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li。

3.on可以给未来动态创建的元素绑定事件。

<ol></ol>
<script>
 $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>abc</li>");
            $("ol").append(li);
</script>