jquery事件绑定与事件委托

时间：2021-07-26 16:57:01 收藏：0 阅读：0

事件

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
        //$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
        //li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <button>add</button>

    <script src="jquery-3.3.1.js"></script>
    <script>
        // 事件绑定
        // let eles=document.getElementsByTagName(‘li‘);
        // for (let i=0; i<eles.length; i++) {
        //     eles[i].onclick=function () {
        //         alert(‘js‘);
        //     };
        // }; // js绑定方式

        // 简写
        // $(‘ul li‘).click(function () {
        //     alert(‘jquery‘);
        // });
        // 全写
        // $(‘ul li‘).bind(‘click‘,function () {
        //     alert(‘jquery‘);
        // });
        // 解除
        // $(‘ul li‘).unbind(‘click‘);


        // 事件委托on()
        $(‘button‘).click(function () {
            let $ele=$(‘<li>‘);
            let len=$(‘ul li‘).length;
            $ele.html((len+1)*111);
            $(‘ul‘).append($ele);
        });
        // $(‘ul li‘).click(function () {
        //     alert(‘hello‘);
        // }); // 新添加的li标签没有点击事件

        $(‘ul‘).on(‘click‘,‘li‘,function(){
            alert(‘hello‘);
        }); // 新添加的li标签也有了点击事件
    </script>
</body>
</html>