学习总结

事件绑定

1.在HTML中元素的的开始标签中绑定事件处理函数属性（已被开发淘汰）(<元素 on事件名=“JS表达式或语句”>)

1. 不符合内容与行为分离的元素，不便于今后代码的维护
2. 不能重用，写在一个按钮中的JS表达式，只能被当前这一个按钮使用

2.在JS中使用赋值方式绑定事件（一个事件仅绑定一个处理函数）(元素对象.on事件名=function(){ … })

注意
元素对象上可用的事件处理函数属性，都是DOM标准提前预定好的。所以只能在DOM预定的几种事件处理函数属性中选择使用，而不能完全自定义属性名
查看一个元素对象身上都有哪些可用的事件处理函数属性
console.dir(元素对象)

缺点
一个元素的一个事件属性上只能绑定一个处理函数。无法同时绑定多个处理函数

3.添加事件监听对象的方式（一个事件可绑定多个处理函数）(元素.addEventListener(“事件名”, 事件处理函数))

注意
1. 事件名不要带on前缀。因为DOM标准的事件名，都是没有前缀的，比如: click, mouseover, change,…

1. 事件处理函数，既可以是匿名函数，又可以是有名称的函数

   移除事件监听
   1. 如果移除用 onclick=function(){} 方式绑定的处理函数，可用 onclick=null，只会移除掉由 onclick=function(){} 方式绑定的事件处理函数

   1. 如果移除用addEventListener()方式绑定的处理函数
      元素.removeEventListener("事件名",原处理函数)
      问题
      移除事件处理函数时，即使写的匿名处理函数和绑定时一模一样，也无法移除
      因为，function(){}等效于new Function()，所以两次匿名函数虽然写的一样，但是相当于先后创建了两个函数对象。所以，移除时用的不是原函数对象。而是新建的函数。当然移除不了
      解决
      只要一个事件监听对象有可能被移除，则绑定时，就必须用有名称的函数保存处理函数的地址。然后移除时才能用函数名获得原函数的地址。不能使用匿名函数
      注意
      同一个处理函数，不允许重复添加两次到元素上
      实例：使用赋值方式和添加事件监听方式绑定事件处理函数

      学习心得

      没啥心得，努力学习