实现想要的事件

其实JS也就那个一点的东西，看看书，了解了解也明白个大概。我们要玩的就是如何用这么一点点的东西实现一些功能。我们程序员所要做的就是要实现想法，实现想要表达的。比如，今天我们今天就要实现一个事件，何为之事件，用现实的说法就是，发生了某件事情。举个例子吧，比如一个页面上一段文字，发生了改变，这就是一个事件，一个文字改变的事件。那么我们的问题出来了，我们用程序语言是如何去捕捉它呢？
我们可以思考一下，这个文字改变中的文字肯定是有一个什么的在不停地监听着他，每时每刻都在看它是否有不同，若有不同了，马上放出消息说他已经改变了。
OK，现在我们去实现这一说法。
我们模拟一下场景吧。看图：

Html代码为：

<div id="test_box">我是的一段文字</div>
<input type="button" value="变成猪" onclick="document.getElementById('test_box').innerHTML = '真成猪了！';" />

 

 

页面上有”我是的一段文字”这一句话，当我点击了“变成猪”这个铵钮后就改变成了猪，然后通知别人，这段文字成猪了。

所以我们现在要有一个监听器不停的去确定这段文字是否改变。这里我是用window.setInterval来实现的。我会不停的读取这个标签的内容，每个次读完了，要和上一次的文字对比一个，看是否有不一样了，如果有不一样就触发我们的事件。

好了，我们就直接看代码吧！

var OldText = document.getElementById("test_box").innerHTML;    //旧的内容
 
var Handler = function(v){    //v　为新内容
    alert(v);
}    //我们要触发的事件
 
var Listion = function(){
    var v = document.getElementById("test_box").innerHTML;    //新内容
    if(v != OldText){    //判断新的内容是否有改变
        //若改变时执行的代码
        if(Handler){
            Handler(v);    //触发事件函数
        }
        OldText = v;    //事件过后新值就成旧值了
    }
 
}    //监听内容的函数
 
window.setInterval(Listion,10);    //开启监听器

 

再贴上整个例子的代码吧！

 

<div id="test_box">我是的一段文字</div>
<input type="button" value="变成猪" onclick="document.getElementById('test_box').innerHTML = '真成猪了！';" />
 
<script type="text/javascript">
var OldText = document.getElementById("test_box").innerHTML;    //旧的内容
 
var Handler = function(v){    //v　为新内容
    alert(v);
}    //我们要触发的事件
 
var Listion = function(){
    var v = document.getElementById("test_box").innerHTML;    //新内容
    if(v != OldText){    //判断新的内容是否有改变
        //若改变时执行的代码
        if(Handler){
            Handler(v);    //触发事件函数
        }
        OldText = v;    //事件过后新值就成旧值了
    }
 
}    //监听内容的函数
 
window.setInterval(Listion,10);    //开启监听器
</script>

 

我们刚刚的想法的表达完成了，有兴趣的朋友可以测试测试。