& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt;/head>
& lt; body>
& lt;按钮类=" add_but "祝辞点击& lt;/button>
& lt; div id="点"祝辞fdfsdf
& lt;/div>
& lt;脚本src=" https://cdn.bootcss.com/jquery/1.8.3/jquery.js "祝辞& lt;/script>
& lt; script>
var计算=1;
var={例子
getData:函数(){
var=https://www.yisu.com/zixun/{数据
内容:“df”+数+ +,
href:“
};
this.renderData(数据);
},
renderData:功能(数据){
. getelementbyid(点).innerHTML=' & lt; div>这是一个“+ data.content +“点此& lt; class="阅读更多" href=" https://www.yisu.com/zixun/javasript;“rel=巴獠縩ofollow”rel=巴獠縩ofollow”在查看更多& lt;/a> & lt;/div>”;
$(" #点”)。(“点击”、“。阅读更多的函数(){
alert('事故发生点”);
})/* setInterval(函数(){
console.log (“fdfdfg”);
},2000);*//*用冒泡来绑定事件,类似于Jquery的绑上定事件*//* document.querySelector(身体的)。addEventListener(“点击”,函数(e) {
如果(e.target.classList.contains(“阅读更多”)){
alert('事故发生点”);
}
}) */}
};
document.querySelector (“.add_but”)。addEventListener(“点击”,函数(e) {
example.getData ();
e.stopImmediatePropagation ();
});
& lt;/script>
& lt;/body>
& lt;/html>
以上是我为说清这个事情写的一段测试代码,可以拷贝下来试试。当我们点击页面的按钮,触发调用<代码> example.getData() 这个函数、模拟ajax获取数据成功后,就会根据局部刷新页面内元素类名为点的内容,同时会为加载这个内容中的阅读更多的标签绑定一个事件,就这样我们想要的效果出现啦,当元素第一次加载时,页面正常,“事故发生点“弹出一次,当二次刷新触发后,你会发现其弹出了两次,当第三次时,你会发现,其弹三次,以此类推....
OMG,这个程序到底怎么了,我明明每次事件绑定前,前面绑定的元素都删除了,为什么,被删除的尸体感觉还在动作,好吧,上面就是我第一次遇到这个情况发出的感叹。
最后是问身边的大神,才突然领悟,原来绑定一直都在,而这个绑定被保存在一个叫做事件队列的地方,他不在循环执行的主线程中,画了一张需要默契才能看懂的图,勉强看一看。
事件队列
其实上面那一段代码是为了测试而特意写的代码,除了定时器外,其他两个点击事件换个正常的写法,重复执行的情况是不会出现的,正常的代码:,,
//jquery事件直接绑定的写法;
$(" #点.read-more”)。(“点击”,函数(){
alert('事故发生点”);
})//原生JS事件直接绑定的写法;
document.querySelector (“.read-more”)。addEventListener(“点击”,函数(e) {
alert('事故发生点”);
})
