单击事件添加问题总结

在原有的功能上添加鼠标增加按钮事件遇到的主要问题如下：()

1.在js的原来的树后面添加“增加按钮”，因为鼠标的单击事件重复导致添加无效。

2.添加的onclick事件问题，不管是使用添加事件还是document.οnclick= function(){};如果使用方法名加括号create（）,则只会调用一次。添加单击事件不能加（）；
<script>
    var inputBtn = document.getElementById('inputBtn');
    inputBtn.addEventListener('click',showMsg,false);//鼠标单击的时候调用showMes这个函数
    function showMsg() {
        alert("事件监听");
    }
</script>
3.最重要的，因为“添加按钮”被水印图片覆盖，所以即使添加成功了点击也是无效的。因为被点击的元素根本不是我添加事件的元素。（造成这个的主要原因是因为我给按钮增加了一个属性：folat:right，导致失去工作流； 所以需要给这个元素再增加一个CSS属性:最上层的DIV的z-index属性设置的大一点，比如z-index:2000)

当浮动后，根本就没点到那个SPAN，所以就没触发事件。

4.修改了一些位置，初始化增加按钮的位置。其实影响不大。

5.给元素增加一些css属性;margin-left，text-align，position:absolute，z_index=200等属性

6.在js对象中写方法，要注意this的用法，bind，call等。所以绑定事件建议使用addEventListener。可以打断点看this里面的方法是否报错。

 

解决问题中的参考的文章：

JS事件之绑定事件   https://blog.youkuaiyun.com/u014205965/article/details/45651875

搞了一天半，看了整个js的方法，包括js中类的继承，debugger使用，方法的所属类查找，div的定位，还有js的事件增加销毁方法，js的一些其他属性，document的inserBefore，innerHTML,classList，createElement等方法。还有一些css布局的知识。