<jQuery> <方法> 十七. on注册事件的两种方式(简单事件和委托事件) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="添加">
<div>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {
        // on注册简单事件
        // $("p").on("click", function () {
        //     alert("aaa");
        // });

        // 注册委托事件
        $("div").on("click", "p", function () {
            alert("bbb");
        });

        // 事件执行顺序 先执行自己的简单事件, 再执行别人给自己身上的委托事件

        // 添加新的p元素
        $("input").on("click", function () {
           $("<p>我是新的p元素</p>").appendTo("div");
        });
    });
</script>
</body>
</html>

 

posted @ 2018-01-12 17:07  云淡风轻我爱编程  阅读(109)  评论(0)    收藏  举报