on click bind addlistener

on和bind差不多，只是on在参数的地方可以选择选择器

addlistener需要document.getxxxx之后使用的

bind和click区别是bind可以取消绑定

on可以绑定到还没创建的dom元素节点上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <a href="">click me</a>
        <button>click</button>
        <p>click</p>
        <h1>click</h1>
        <textarea id="one" name="" id="" cols="30" rows="10"></textarea>
    </div>
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script>
        $("a").click(function(e) {

            console.log("a start");
            e.preventDefault();
        });
        $("button").click(function(e) {

            console.log("buttom first start");
        });
        $("button").click(function(e) {

            console.log("buttom second start");
        });
        $("p").bind("click", function() {
            console.log("p click!");

        });
        $("h1").on("click", function() {
            console.log("h1 click!");
        });
        var textareaone = document.getElementById("one");
        textareaone.addEventListener("click", function() {
            console.log("textare start!");
        });
    </script>
</body>

</html>

 

posted @ 2020-09-26 15:38  abcdefgab  阅读(172)  评论(0)    收藏  举报