添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
    var ob = document.getElementById('btn');
    //document.body.innerHTML +="<div></div>";
    ob.onclick = function(){
        console.info(1)

  很简单的几行代码,注释那段代码加了和不加区别很大,加了后发现事件是没有被触发的,相信老鸟们当然懂这是为什么了。其实是innerHTML,因为只是操作了文本,操作的元素是body,所以导致了重写了button,相当于是创建了另外一个dom对象,与之前渲染的dom没有关系,所以导致了事件的丢失。

  那我们既然知道其病因,我们就来解决此类问题。其实本质就是dom丢失导致事件丢失,我们刚才说了我们操作的是body对象,所以我们就在父类元素上做文章就可以了。因为父元素(我们操作的元素)是一直存在的。我这里提出常用的方案:

用appendchildren()来代替innerHTML

    var ob = document.getElementById('btn');
    var div = document.createElement('div');
    document.body.appendChild(div);
    //document.body.innerHTML +="<div></div>";
    ob.onclick = function(){
        console.info(1)

  可以看到我们只是新建了一个需要的div然后把它append到了body中,并没有改变其他任何东西。所以当然不存在dom事件丢失。

    var body = document.body;
    body.innerHTML +="<div></div>";
    body.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'button'){
         console.info('我被点击了')

  我们这里将事件绑定给了body。通过body委托事件给button,这里用到了nodeName,来给按钮绑定事件。当然这里判断的条件随意添加.
  如果是jq的话那就更方便了,直接用on绑定事件就可以。例如:

    $(body).on('click','button',function(){