jQuery的事件绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">

</head>
<body>
<p>star</p>
<!---->
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<!---->
<input value="+" type="button" onclick="add()">
<script src="jquery-3.4.1.js"></script>
<script>
    //1.click事件绑定(可以绑定多个标签)
//    $('p').click(function () {
//        alert($(this).css('color','red')) //star变红
//        alert(this.innerHTML)//  star

//    })
    //=========================================================
    //2.bind事件绑定--(用click触发)
//    $('p').bind('click',function () {
//        alert(this.innerHTML);//star
//
//    })
    //=========================================================
    //3.用该方法绑定的事件不能被添加的新标签继承
//    $('ul li').click(function () {
//        alert(123);
//    });
    //=========================================================
    //4.用该方法绑定的事件可以被添加的新标签继承(事件委托)
    //给动态标签绑定事件的方法用on
//    $('ul').on('click','li',function () {
//        alert('position')
//    });
//=========================================================
    //同bind方法
//    $('ul li').on('click',function () {
//        alert('position')
//    });//如果没有select，那么这样跟bind方法是一样的
//=========================================================
    //5.on方法中的  [data]参数(用event调用data对象)

    function show(event){
        alert(event.data.f1);//star come up
    }
    $('p').on('click',{f1:'star come up'},show);


    function add() {
        var tag=document.createElement('li');
        tag.innerHTML='⭐';
        $('ul').append(tag);

    }

</script>

</body>
</html>
猜你喜欢
