事件处理程序

事件处理程序，演变（扩展）

示例1：创建 <input> 标签或 <button> 标签,在HTML 内联样式：

<input> 标签：

 <input type="button" value="点我" onclick="console.log('Hello')" />

<button> 标签:

<div>
    <button onclick="console.log('Hi')">点我</button>
</div>

如果添加多个输出信息或者其他需求，每次都需要寻找此段代码更改太麻烦，代码少这个方法还可行，若千万行代码以上，怎么找。我们是否灵活方便？由此扩展示例2

示例2：从HTML 内联样式变成内部样式。以 <button> 标签为例，其他标签也是大致用法，可能标签里添加多几个键值吧。

<div>
  <button onclick="cancel()">点我</button>
</div>
<script>
  function cancel() {
    console.log('Hi');
  }
</script>

添加多个输出信息或其他需求，如何处理？答：直接在JS 定义函数，函数名称捆绑到HTML 指定元素属性（动态事件）的值里，如上代码。但是这样编写有缺点：影响加载和维护等原因。扩展示例3

示例3：把 HTML 动态事件以 CSS 选择器绑定，然后 JS 以 document 对象方法控制 HTML 的元素动态事件，这样做到 HTML 和 JS 代码分离，不影响加载和维护。

<div>
  <button id="btn">点我</button>
</div>
<script>
  //document对象方法一：querySelector()
  var btnClick = document.querySelector('#btn');

  //document对象方法二：getElementById()
  var btnClick = document.getElementById('btn');

  // document 对象两种方法都可以执行如下代码：
  btnClick.onclick = function () {
    console.log('Hi');
  }
</script>

JS document 对象除了以上两种方法，还有其他对象方法。首先获取HTML 元素，以document 对象方法获取；然后获取到赋值给新定义变量，变量变成对象，对象设置动态时间属性；最后以函数方法添加需求再赋值给对象属性。这样HTML 代码变得简洁多。扩展示例4

示例4：以 document.querySelector() 为例，其他 document 对象方法也是大致用法，可能参数使用方法不同，自行查询。

<div>
  <button id="btn">点我</button>
</div>
<script>
  var btnClick = document.querySelector('#btn')
  btnClick.addEventListener('click',function (){
    console.log('Hi');
  },false)
</script>

该方式为DOM2 事件处理程序，有两个方法，两个方法都有三个参数。两个方法分别为：addEventListener()和removeEventListener()三个参数分别为：事件类型，事件处理方法，布尔参数。布尔参数就是判断捕获(false)还是冒泡(true)阶段，若没有把布尔参数编写出来，那默认为false(冒泡阶段)。把需求统一放在参数里，方便辨别、处理、判断。

这样编写有个缺点，通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，怎么移除事件处理程序？请看扩展示例5

示例5：移除事件处理程序的时，把事件处理方法单独出来，并赋值到新变量里。

<div>
  <button id="btn">点我</button>
</div>
<script>
  var btnClick = document.querySelector('#btn')

  var handler = function () {
    console.log('Hi');
  }

  var listener = function () {
    console.log('Hello');
  }

  btnClick.addEventListener('click',handler,false)
  btnClick.removeEventListener('click',handler,false)

  btnClick.addEventListener('click',listener,false)
</script>

指定同变量（handler，前提是同变量的值是事件处理方法（以函数方式编写最好，个人理解函数比较灵活）。）可以添加和去除，再创新变量，把需求以函数方式赋值到新变量（listener），这样编写避免或减少问题出错概率。建议示例5方式编写。