简单理解事件

什么是事件

对用户操作做出反应

事件的作用

1 :实现用户行为与浏览器页面的交互
2 :监听机器.进度,动画等

事件解决了的问题

让界面活起来

分析流程

• 1.用户对哪一个元素,做了什么事

给哪个元素,绑定了什么事件

• 2.做了这件事后浏览器展示什么效果

在事件处理函数中编写哪些代码

事件里面的具体内容

事件参考清单

事件处理函数

• 1.执行慢的函数
  • 在全局后面去执行的代码
• 2.当触发事件的时候执行函数

事件分类

• 内置事件
  事件参考清单

如何知道应该用哪一个事件?
1.分析行为 2.根据行为查找事件

• 自定义事件

事件对象

• 作用 : 记录触发事件的详细信息
  • 1.触发事件的元素
  • 2.事件类型
  • 3.触发事件位置
  • 4.触发事件时间
  • 5.键盘中的哪个案件
  • …
• 获取 : 事件处理函数形参
• 用途 :
  • 1.查找出触发事件元素
  • 2.获取触发事件元素名,区分 谁触发的事件(事件委托)

事件委托

事件委托:

1.利用事件流的特点来绑定事件的一种方式
2.给绑定事件的目标元素的父元素绑定事件 以此来减少目标元素的事件绑定次数 从而优化程序

事件委托绑定方式

      // 普通动态绑定事件
      // var ulNode = document.createElement('ul');
      // document.body.appendChild(ulNode);
      // for (let index = 0; index < 10; index++) {
    
      // var liNode = document.createElement('li');
      // liNode.innerHTML = `${index + 1}`;
      // liNode.onclick = function () {
    
      // this.style.backgroundColor = 'green';
      // }
      // ulNode.appendChild(liNode)

      // }

      // 事件委托动态绑定事件
      var ulNode = document.createElement('ul');
      document.body.appendChild(ulNode);
      ulNode.onclick = function (event) {
    
          if (event.target.nodeName == 'LI') {
    
              event.target.style.backgroundColor = 'green'
          } else {
    
              console.log('点的不是li');
          }
      }
      for (let index = 0; index < 10; index++) {
    
          var liNode = document.createElement('li');
          liNode.innerHTML = `${
      index + 1}`;
          ulNode.appendChild(liNode)

      }