前端知识二

事件委托（事件代理）

事件委托也可以叫事件代理，是事件冒泡与事件捕获的运用。

• 基本概念

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时（事件捕获），会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

• 动态绑定事件

在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；

所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

  
item 1
  
item 2
  
item 3
  ......
  
item n


document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  if (target.matches('li.class-1')) {
    console.log('the content is: ', target.innerHTML);
  }
});

自定义事件

可以代码触发事件执行，同时可以配合代理等功能实现修改数据界面自动更新

• Event()——Event对象的构造函数

• event = new Event(typeArg, eventInit);
  • typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。
  • eventInit：可选，传递EventInit类型的字典。实际上这个EventInit类型的字典也就是我们使用InitEvent()时需要传递的参数，以键值对的形式传递，不过它可以多选一个参数：
    • bubbles：事件是否支持冒泡，传递一个boolean类型的参数，默认值为false。
    • cancelable：是否可取消事件的默认行为，传递一个boolean类型的参数，默认值为false。
    • composed：事件是否会触发shadow DOM（阴影DOM）根节点之外的事件监听器，传递一个boolean类型的参数，默认值为false。

• CustomEvent()——CustomEvent对象的构造函数
  CustomEvent()可以像Event()那样赋值，但它可以在Web Workers中使用（与主线程分离的另一个线程），可以传递跟事件关联的相关值（detail）。

• event = new CustomEvent(typeArg, customEventInit);
  • typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。
  • customEventInit：可选。传递一个CustomEventInit字典。实际上这个字典就是我们使用initCustomEvent()时需要的参数，这个参数就是事件相关值（detail）：
    • detail：可选，默认值为null，类型为any（也就是说可以传递任意类型的参数）。这个值就是和事件相关联的值。
    • CustomEventInit字典也可以接受EventInit字典的参数，

WebComponents

基本使用(复制阮一峰博客)

这种自定义的 HTML 标签，称为自定义元素（custom element）。根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML元素。所以，不能写成。

class UserCard extends HTMLElement {
  constructor() {
    super();
  }
}

上面代码中，UserCard就是自定义元素的类。注意，这个类的父类是HTMLElement，因此继承了 HTML 元素的特性。接着，使用浏览器原生的customElements.define()方法，告诉浏览器元素与这个类关联。

window.customElements.define('user-card', UserCard);

• 自定义元素的内容

自定义元素目前还是空的，下面在类里面给出这个元素的内容。

class UserCard extends HTMLElement {
  constructor() {
    super();

    var image = document.createElement('img');
    image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png';
    image.classList.add('image');

    var container = document.createElement('div');
    container.classList.add('container');

    var name = document.createElement('p');
    name.classList.add('name');
    name.innerText = 'User Name';

    var email = document.createElement('p');
    email.classList.add('email');
    email.innerText = '[email protected]';

    var button = document.createElement('button');
    button.classList.add('button');
    button.innerText = 'Follow';

    container.append(name, email, button);
    this.append(image, container);
  }
}