详细解释单向绑定

参考资料

MDN

addEventListener()定义与用法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <input type="text" id="a">

  <span id="b"></span>

  <script>

    // var obj = {};

    // Object.defineProperty(obj,"hello",{

    //   set: () => {

    //     console.log("get方法被调用");

    //   },

    //   get: (val) => {

    //     console.log("se方法被调用"+val);

    //   }

    // })

    let obj = {};

    //Object.defineProperty(obj, prop, descriptor)

    // obj 要在其上定义属性的对象。

    // prop 要定义或修改的属性的名称。

    // descriptor 将被定义或修改的属性描述符。

    Object.defineProperty(obj, 'hello', {    //这里定义obj.hello为完成修改的属性

      set: (newVal) => {                     //当obj.hello的属性发生变化,就会以参数传进来

        document.getElementById('a').value = newVal;    //set触发给a值同时把值给b实现绑定

        document.getElementById('b').innerHTML = newVal;

        obj.hello

      },

      get: ()=> {

        console.log("hahahaah");

      }

    });

    //addEventListener() 方法用于向指定元素添加事件句柄。

    //element.addEventListener(event, function, useCapture)

    //event 所有 HTML DOM 事件

    //function 指定事件触发时执行的函数。

    //useCapture 指定事件是否在捕获或冒泡阶段执行。

    document.addEventListener('keyup', (e) => { //监听键盘的按键松开的事件

      console.log(e);

      obj.hello = e.target.value; //将监听到了变化的值给obj.hello,让他触发set属性

    })

  </script>

</body>

</html>

使用js实现单向绑定的更多相关文章

  1. Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   参照链接: http://cn.vuejs.org/guide/index.html [起步]部 ...

  2. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  3. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. js事件的绑定与移除

    事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...

  6. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  7. 【前端】vue.js实现输入框绑定

    vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...

  8. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  9. JS 监听绑定和取消事件

    1. 原生 JS 语言: 绑定:addEventListener(type, function, false) 取消: removeEventListener(type, function, fals ...

随机推荐

  1. Android 高速录像(1)

    package com.kirin.voltage.activity; import java.io.File;import java.io.IOException;import java.util. ...

  2. mac crontab

    1.前提工作 正常情况下mac普通用户是无法使用crontab的,需要做如下修改: 在~/.vimrc下添加这么一行: autocmd filetype crontab setlocal noback ...

  3. web统计数据搜集及分析原理

    在现代web应用开发中,数据扮演着越来越重要的角色:通过数据我们能够知道系统哪些地方有待改进,从而迭代开发重新上线, 随后再次通过数据我们来评估新的迭代开发是否满足了我们的预期目标,从而形成了一个数据 ...

  4. C++中protected的访问权限

    关于C++中protected的访问权限的讨论已经是一个很陈旧的话题了,陈旧到大家都不愿意去讨论,觉得他见到到吃饭睡觉那么自然. 我再次读<C++ Primer>的时候,其中关于prote ...

  5. Session跨域、Session共享、Mode=StateSever方式解决问题

    前言 很多童鞋在工作或面试的过程中,也许会遇到这样的问题,使用Session,怎样让多个站点实现Session共享的问题,也就是在A站点登录,那么在B站点就不需要重新登录了那?如果采用Session保 ...

  6. python 文件目录操作

    在Python程序中执行目录和文件的操作 Python内置的os模块可以直接调用操作系统提供的接口函数 Python交互式命令行 >>> import os>>> ...

  7. css z-index层重叠顺序

    一.z-index语法与结构 z-index 跟具体数字 如:div{z-index:100}注意:z-index的数值不跟单位. z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数) ...

  8. 如何退出virtualbox scale mode

    进入scale mode之后,可能会退不出来 HOST Key + C. 默认是 右Ctrl + C

  9. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

  10. shell----删除文件中的^M

    在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 1.使用vi的替换功能.启动vi,进入命令模式,输入以下命令: :%s/^M$/ ...