本文目录一览：
- 1、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有什么实际意义?怎么使用?文档里的监听又是什么意思呢?
```js
// 创建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的构造函数需要一个参数Hanlder，因为ContentObserver内部使用了一个实现Runnable接口的内部类NotificationRunnable，来实现数据库内容的变化。需要使用hanlder去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);
var observe = new MutationObserver(mutationCallback);
observe.observe(dom, config);// 后面介绍config的配置
var observe = new MutationObserver(mutationCallback);
observe.disconnect();
var observe = new MutationObserver(mutationCallback);
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.style.width="50px"
this.innerHTML = "888888"
}
}
/script
原文链接：