jQuery的事件绑定

82550495 2020-02-18

<!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>

相关推荐

82550495 / 0评论 2020-03-05