js监听数据库文档介绍内容的简单介绍

发布时间：2023-12-08

js监听数据库文档介绍内容的简单介绍

更新：2022-11-17 20:31

本文目录一览：

  1. [JS每5秒监听DIV内容 如果有变动,就运行某函数](#JS每5秒监听DIV内容 如果有变动,就运行某函数)
  2. Vue.js中vm.$on有什么实际意义?怎么使用?文档里的监听又是什么意思呢?
  3. 怎样监听到数据库的数据变化
  4. 如何用js监听网页的各种操作
  5. 如何在javascript监听文本框内容的改变
  6. js监听页面元素变化

JS每5秒监听DIV内容 如果有变动,就运行某函数

首先，当页面渲染完成后，记录历史的值：

var historyVal = $('#jiance').html();

每隔5秒执行检测：

setInterval(function() {
  notifyme();
}, 5000); // 5000表示5000毫秒，即每隔5秒执行一次

Vue.js中vm.$on有什么实际意义?怎么使用?文档里的监听又是什么意思呢?

// 创建vue实例。
var vm = new Vue()
// 创建事件监听 @params 监听的事件名 回调函数。
vm.$on('start', function (params) {
  console.log(params + '，我让start 事件触发了');
})
// 主动触发事件，此时会触发监听的回调(我们打印的代码就会运行) @params 触发的事件名 传递的参数。
vm.$emit('start', '我是触发传递的参数')

Vue的$on就和addEventListener差不多，是创建一个事件监听。 $emit 就和自定义事件一样，你主动创建了一个事件，并且让这个事件触发了。 一般用来Vue非父子组件之间传递数据(Vue的bus)。

怎样监听到数据库的数据变化

在Android中经常会用到改变数据库内容后再去使用数据库更新的内容，很多人会重新去query一遍，但是这样的问题就是程序会特别占内存，而且有可能会漏关cursor而导致程序内存未释放等等。其实Android内部提供了一种ContentObserver的东西来监听数据库内容的变化。 ContentObserver的构造函数需要一个参数Handler，因为ContentObserver内部使用了一个实现Runnable接口的内部类NotificationRunnable，来实现数据库内容的变化。需要使用handler去post消息。注册ContentObserver的方法是：

getContentResolver().registerContentObserver(uri, notifyForDescendents, observer);

上面3个参数为：

  • uri：Uri类型，是需要监听的数据库的uri。
  • notifyForDescendents：boolean，true的话就会监听所有与此uri相关的uri。false的话则是直接特殊的uri才会监听。一般都设置为true。
  • observer：ContentObserver，就是需要的contentobserver。 初始化一个ContentObserver对象，重载onChange(boolean )，在这个方法里去操作数据库的使用，针对变化后的使用。

如何用js监听网页的各种操作

/* obj 等于要监听的对象，如果要监听整个网页文档用 document
** @event {String} 要监听的事件名
** @handle {Function} 发生事件后的处理函数
*/
obj.addEventListener('event', handle);

如何在javascript监听文本框内容的改变

  1. IE的用onpropertychange事件
  2. 其他浏览器用oninput 下面用jQuery简单写一下：
$("input[type=text]").on('input', function(){
  // 这里当文本框内容变化时，触发事件，执行程序
});

js监听页面元素变化

该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作。

var observe = new MutationObserver(mutationCallback);
observe.observe(dom, config); // 后面介绍config的配置
observe.disconnect();
var record = observe.takeRecords();

配置示例：

let config = {
  attributes: true, // 目标节点的属性变化
  childList: true, // 目标节点的子节点的新增和删除
  characterData: true, // 如果目标节点为characterData节点时，也要观察该节点的文本内容是否发生变化
  subtree: true, // 目标节点所有后代节点的attributes、childList、characterData变化
};

完整示例：

<div id="h">123123</div>
<script>
  window.onload = function () {
    // Firefox和Chrome早期版本中带有前缀
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    // 选择目标节点
    var target = document.querySelector('#h');
    // 创建观察者对象
    var observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        console.log(mutation);
      });
    });
    // 配置观察选项:
    var config = { attributes: true, childList: true, characterData: true };
    // 传入目标节点和观察选项
    observer.observe(target, config);
    // 随后,你还可以停止观察
    // observer.disconnect();
    document.getElementById('h').onclick = function () {
      this.innerHTML = "888888";
    }
  }
</script>

原文链接：

推荐文章