2020914日志邹瑞

学习总结

事件绑定

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(),所以两次匿名函数虽然写的一样,但是相当于先后创建了两个函数对象。所以,移除时用的不是原函数对象。而是新建的函数。当然移除不了
      解决
      只要一个事件监听对象有可能被移除,则绑定时,就必须用有名称的函数保存处理函数的地址。然后移除时才能用函数名获得原函数的地址。不能使用匿名函数
      注意
      同一个处理函数,不允许重复添加两次到元素上
      实例:使用赋值方式和添加事件监听方式绑定事件处理函数

      学习心得

      没啥心得,努力学习

评论

this is is footer