行内方式绑定(元素属性)
<body><input type="button" value="按钮" id="btn" onclick="alert(2)"></body><body><input type="button" value="按钮" id="btn" onclick="f()"></body><script>function f(){console.log(3);}</script>
onclick 其实就是html元素的一个属性，而属性的值需要是一段可执行的JS代码
动态绑定 (节点对象属性)
<body><input type="button" value="按钮" id="btn"></body><script>var btn = document.getElementById('btn');btn.onclick = function(){alert(4);}</script>
获取节点对象，然后修改节点对象的属性 onclick的值，值是一个匿名函数即可；
以上两种事件绑定方式，需要在事件名称前加 on ;事件监听(节点对象方法)
<body><input type="button" value="按钮" id="btn"></body><script>var btn = document.getElementById('btn');btn.addEventListener('click',function(){alert(5);});</script>
每一个节点对象都提供了addEventListener方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
