精华内容
下载资源
问答
  • layui动态绑定事件

    万次阅读 2017-12-27 15:16:16
    Tips:很多前端新手会遇到动态创建DOM(html片段)的场景,原来的点击事件无法生效。以及成熟的layui框架动态创建DOM(html片段)不知道如何解决,接下来为大家解释其实现的原理,是主要是通过es6的写法。

    Tips:很多前端新手会遇到动态创建DOM(html片段)的场景,原来的点击事件无法生效。以及成熟的layui框架动态创建DOM(html片段)不知道如何解决,接下来为大家解释其实现的原理,是主要是通过es6的写法。

    ####一、常规动态创建DOM(html片段)

    <!--.html代码片段-->
    <!--按钮-->
    <button class="data-set" type="button">添加</button>
    <!--动态创建的位置-->
    <div class="setBox" data-uid="setBox"></div>
    
    <!--jQ代码片段-->
    	$(function(){//初始化
    		var setBox=$('.setBox');//获取动态添加对象
    		$('.data-set').on('click',function () {
                    
                    var _html3=`
                    <div class="info"> <admin:text     value=""                 class="timeInterval" /> <span class="del"> 删除</span> </div>
                    `;//此处用es6的方式拼接需要动态创建的代码(模板)
                    setBox.append(_html3);//append方法将_html3动态添加到setBox内
                    //$('.timeInterval').focus();//聚焦(如果是layui框架会有小bug,用户要先失去焦点再点一次才能调用layui方法)
                });
                
           $('body').on('click','.del',function () {//事件委托,请看下方注释
                    $(this).parents('.info').hide();//模拟前端删除按钮
                });
    	})
    

    Tips:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。这也是解决动态创建HTML片段点击事件无法生效的原因。body是父级,即DOM本就存在的对象,但是考虑到兼容性,移动端IOS不支持body作为事件绑定的对象,本文的解决方案是将body改为.setBox即可完美实现事件委托。

    效果图如下:
    这里写图片描述

    Tips:绿色框内为初始状态,红色框内为点击添加后实现的模型

    二、layui动态绑定事件

    #####1.框架的引入和实例化
    自行引入layui.css和layui.js,初始化或者实例化laydate,如果没有这些操作可是会报错的哦。

    layui.use('laydate', function(){
         var laydate = layui.laydate;
    })
    

    #####2.html代码片段

    <b>禁止交易时间点击日历增加</b>
    <!--按钮-->
    <p class="data-stop">添加</p>
    <!--动态创建的位置-->
    <div class="stopBox"></div>
    

    tips:此处的p标签为按钮,样式自行修改

    #####3.js代码片段

    var stopBox=$('.stopBox');
            var test=0;//定义一个变量,用于动态创建类名
            $('.data-stop').on('click',function () {
                test=test+1;//防止类名重复
                var _html2=`<div class="info"><admin:text  value="" len="250"  class="stop${test}"/> <span class="del"> 删除</span></div>`;//(关键)此处用es6的方式拼接需要动态创建的代码(模板),若不是es6的写法$(test)无法识别,需要用“+test+”的方式去拼接。
        stopBox.append(_html2);//实现代码片段动态添加
           //(关键)执行一个laydate实例,如果不执行实例化,无法给动态添加的DOM节点绑定方法
           laydate.render({
               elem: '.stop'+test //指定元素,test为变量
           });
           //$('.stop'+test).focus();//建议不使用聚焦,否则用户体验感不佳
       });
    
           //交易时间删除按钮
           $('body').on('click','.del',function () {
               $(this).parents('.info').hide();//模拟删除
           });
    

    效果图如下:
    这里写图片描述

    这里写图片描述

    展开全文
  • Jquery给Dom 动态绑定事件

    千次阅读 2016-07-28 19:55:51
    我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的...
    我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是
    在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件。
    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。
    常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。
    <table>
        <tbody>
            <tr>
                <td>这行原来就有</td>
                <td><buttonclass="del">删除</button></td>
            </tr>
            <tr>
                <td>这行原来就有</td>
                <td><buttonclass="del">删除</button></td>
            </tr>
        </tbody>
    </table>


    通常,我会这么绑定
    1.jQuery(function($){
    2.   //已有删除按钮初始化绑定删除事件
    3.    $(".del").click(function() {
    4.        $(this).parents("tr").remove();
    5.   });
    6.});


    对于在domready之前就存在的删除按钮,一切都很完美。但如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用。
    如何解决这个问题?以下提供4种解决方案:
    =============================
    0号解决方案——onclick法
    如果不顾结构与行为分离的准则的话,通常,我会这么做。
    注意,此时的deltr这个function必须是全局函数,得放jQuery(function($) {})外面,放里边就成局部函数了,html里的onclick就调用不到了!
    1.<td><buttonοnclick="deltr(this)">删除</button></td>
    1.jQuery(function($){
    2.   //添加行
    3.    $("#add2").click(function(){
    4.        $("#table2>tbody").append('<tr><td>新增行</td><td><button nclick="deltr(this)">删除</button></td></tr>')
    5.   });
    6.});
    7.//删除行的函数,必须要放domready函数外面
    8.function deltr(delbtn){
    9.    $(delbtn).parents("tr").remove();
    10.};
    =============================
    1号解决方案——重复绑定法
    即,在domready的时候就给已有的元素绑定事件处理函数,
    而后当新增加的元素的时候再次绑定。
    1.<td><buttonclass="del">删除</button></td>
    1.jQuery(function($){
    2.   //定义删除按钮事件绑定
    3.   //写里边,防止污染全局命名空间
    4.   function deltr(){
    5.        $(this).parents("tr").remove();
    6.   };
    7.   //已有删除按钮初始化绑定删除事件
    8.    $("#table3 .del").click(deltr);
    9.   //添加行
    10.    $("#add3").click(function(){
    11.        $('<tr><td>新增行</td><td><button class="del">删除</button></td></tr>')
    12.           //在这里给删除按钮再次绑定事件。
    13.            .find(".del").click(deltr).end()
    14.            .appendTo($("#table3>tbody"));
    15.   });
    16.});


    =============================
    2号解决方案——事件冒泡法
    利用事件冒泡的原理,我们给这个按钮的祖先元素绑定事件处理函数。
    然后通过event.target这个对象来判断,这个事件是不是我们要找的对象触发的。
    通常可以利用一些DOM属性,比如event.target.className、event.target.tagName等之类的来判断。
    1.<td><buttonclass="del">删除</button></td>
    1.jQuery(function($){
    2.   //第四个表格的删除按钮事件绑定
    3.    $("#table4").click(function(e) {
    4.       if (e.target.className=="del"){
    5.            $(e.target).parents("tr").remove();
    6.       };
    7.   });
    8.   //第四个表格的添加按钮事件绑定
    9.    $("#add4").click(function(){
    10.        $("#table4>tbody").append('<tr><td>新增行</td><td><button class="del">删除</button></td></tr>')
    11.   });
    12.});




    另外,可以使用live进行绑定,如下:
    $('.clickme').live('click', function() {
    //处理代码
    });
    :一般采用0号解决方案
    展开全文
  • 动态绑定实现的原理

    千次阅读 2017-05-02 22:23:09
    当用virtual关键字来声明一个成员函数,编译器机会根据动态绑定机制在幕后完成一些工作。 当编译器发现类中有虚函数的时候,编译器会创建一张虚函数表,把虚函数的函数入口地址放到虚函数表中,并且在类中增加一个...

    当用virtual关键字来声明一个成员函数,编译器机会根据动态绑定机制在幕后完成一些工作。

    当编译器发现类中有虚函数的时候,编译器会创建一张虚函数表,把虚函数的函数入口地址放到虚函数表中,并且在类中增加一个指针:vpointer,这个指针是指向对象的虚函数表。在多态调用的时候,根据vpointer指针,找到虚函数表来实现动态绑定。

    class Test
    {
    void fun(){}
    };
    class Dad
    {
    public:
    virtual void fun1(){}
    virtual void fun2(){}
    };
    class Son :public Dad
    {
    virtual void fun3(){}

    };
    void test()
    {
    cout << sizeof(Test) << endl;//1,没有成员变量,大小是1
    cout << sizeof(Dad) << endl;//4,编译器秘密增加了一个指针,所以,大小是4
    cout << sizeof(Son) << endl;//4,子类继承了vpointer指针
    }

    在编译阶段,编译器秘密增加了一个vpointer指针,在对象构建的时候,也就是在对象初始化调用构造函数的时候,编译器默认会在编写的每一个构造函数中,增加一些vpointer初始化的代码。如果没有提供构造函数,编译器会提供默认的构造函数,会在默认构造函数中做这个工作,初始化vpointer指针,使它指向本对象的虚函数表。

    子类继承基类的vpointer指针,这个指针指向基类虚函数表,当子类调用构造函数时,子类的vpointer指针便会指向子类的虚函数表。

    当子类没有重写基类虚函数时:


    过程分析:

    Dad* dad=new Son;

    dad->fun1();

    当程序执行到这里,会去Dad指向的空间中寻找vpointer,通过vpointer找到fun1(),由于子类没有重写(没有覆盖)基类的fun1(),所以,调用fun1()时,仍然调用的是基类的fun1.

    ---------------------------------------------------------

    当子类重写基类虚函数时:

    class Son :public Dad
    {
    virtual void fun3(){}

    virtual void fun1(){}

    };


    过程分析:

    Dad* dad=new Son;

    dad->fun1();

    当程序执行到dad->fun1();时,会去Dad指向的空间中寻找vpointer,vpointer找到fun1(),由于子类重写fun1,所以调用fun1时,调用的是子类的fun1.

    展开全文
  • Vue中事件绑定原理简述

    千次阅读 2020-03-23 07:21:12
    Vue的事件分为2种,一种是原生事件绑定,还有一种是组件的事件绑定。 1. 原生dom事件绑定,采用的是addEventListener实现; 2. 组件绑定事件采用的是$on方法(可用$event触发)。 原生dom事件绑定,采用的...

    【 学习探索过程中记下的点点笔记,以供分享,欢迎大家一起学习探讨~如有雷同可附链接,谦虚学习!】

    Vue中事件绑定的原理简述

    Vue的事件分为2种,一种是原生事件绑定,还有一种是组件的事件绑定。

    1. 原生dom事件的绑定,采用的是addEventListener实现;

    2. 组件绑定事件采用的是onon方法(可用event触发)。

    展开全文
  • 什么是事件委托?...应用场景:js动态生成的dom元素,无法直接操作,需要使用事件委托绑定方法。 语法结构:例如 父id = “aaa”. 动态生成的span,需要绑定事件 $("#aaa").on('cli...
  • React的事件绑定,是通过在react元素上添加事件属性,且事件属性名必须采用驼峰命名的方式,如onClick等。 import React from 'react' const Test = () => { const handleClick = () => { console.log('...
  • 下面以绑定onclick实践为例阐述注解的原理。 1、定义Onclick注解类 @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) @BaseEvent(listenerSetter = "setOnclickListener", listenerType = ...
  • js动态生成的DOM绑定事件失效的问题

    千次阅读 2018-03-20 15:34:12
    事件委托原理事件冒泡机制。优点:1. 可以大量节省内存占用,减少事件注册。比如ul 上代理所有li 的click 事件。2. 可以实现当新增子对象时,无需再对其事件进行绑定。对动态内容部分尤为合适。缺点:如果把所有...
  • js关于给动态生成的元素绑定事件

    千次阅读 2017-09-17 11:18:59
    动态生成的元素绑定事件第一种方式可以直接在html标签中添加 onclick 事件,但所添加的事件必须是全局的,不能放到$(function(){})中,但这种方法违反结构与行为分离的原则。  原生js中可以使用 addEventListener...
  • 给Jquery动态添加的元素绑定事件

    千次阅读 2016-11-28 10:02:40
    给Jquery动态添加的元素绑定事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不...
  • jQuery事件绑定原理(1)

    千次阅读 2017-05-28 15:56:51
    jQuery事件处理机制能帮我们处理那些问题? 解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件...jQuery的事件绑定有多个方法可以调用,以click事件来举例:1. click方法 2. bind方法 3. delegate方法 4. on
  • jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素...这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 ? 1 2 3
  • 一、事件绑定有几种? 1.原生的事件绑定,原生 dom 事件绑定,采用的是 addEventListener 实现。 2.组件的事件绑定,组件绑定事件采用的是 $on 方法 。 let compiler = require('vue-template-compiler'); // ...
  • 所以,“事件委托”就腾空出现啦事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。事件委托有一个很好的应用场景,就是你的HTML标签是动态添加的。事件绑定是在文档载入时,JS渲染引擎...
  • vue双向数据绑定原理

    万次阅读 2017-09-04 19:30:02
    有关双向数据绑定的原理 最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以... 文章链接:vue的双向绑定原理及实现 Mozilla 开发者服务:Object.defineProperty...
  • 静态绑定动态绑定

    千次阅读 多人点赞 2018-02-18 19:30:42
    绑定分为静态绑定(前期绑定)和动态绑定(后期绑定)。   二:静态绑定  静态绑定(前期绑定)是指:在程序运行前就已经知道方法是属于那个类的,在编译的时候就可以连接到类的中,定位到这个方法。 ...
  • vue双向数据绑定原理解析

    千次阅读 多人点赞 2019-06-26 17:13:14
        每当面试官问到Vue数据双向绑定原理的时候,我们都会简单的说:Vue 内部通过 Object.defineProperty 方法属性拦截的方式,把data 对象里每个数据的读写转化成 getter / setter,当数据变化时通知视图更新。...
  • 动态绑定的多态的实现原理

    千次阅读 2014-03-11 16:50:49
    嘿嘿,上篇写了多态的一些理解,马不停蹄又去补了多态的实现原理——虚表。我觉得源栗子(原例子)写的简单明了,就直接转过来了,大家一起学习学习。 原文点击打开链接,我稍微精简了一下 1. 用virtual关键字声明的...
  • C++ 动态绑定

    千次阅读 2019-03-17 19:44:09
    C++中动态绑定 定义 c++中动态绑定是将一个过程调用与相应代码链接起来的行为。是指与给定的过程调用相关联的代码,只有在运行期才可知的一种绑定,他是多态实现的具体形式。 实现原理 C++中,通过基类的...
  • 关于C++内部如何实现多态,对程序员来说即使不知道也没关系,但是如果你想加深对多态的理解,写出优秀的代码,那么这一节就具有重要的意义。...找到函数名对应的地址,然后将函数调用处用该地址替换,这称为函数绑定

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 282,374
精华内容 112,949
关键字:

动态绑定事件原理