zoukankan      html  css  js  c++  java
  • jquery事件绑定与事件委托

    事件

    页面载入
        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>
    while True: print('studying...')
  • 相关阅读:
    快速排序最新理解
    八大排序算法
    图的创建
    ARM入门实践(一)----Mini6410上最简单的LED点灯裸机程序
    驱动编程思想之初体验 --------------- 嵌入式linux驱动开发之点亮LED
    嵌入式Linux LED小灯点亮实验
    手算KMP匹配的Next值和Nextval值
    及格率 不谢 cast(cast (sum(case when res>=60 then 1 else 0 end)*100/(count(1)*1.0) as float) as nvarchar)+'%' '及格率'
    Hibernate反向工程生成DAO
    struts2&&Hibernate Demo1
  • 原文地址:https://www.cnblogs.com/xuewei95/p/15060885.html
Copyright © 2011-2022 走看看