原生JS添加事件方法

事件

• 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option);
  • EventName: example => click dblclick change blur focus keyperss keydown keyup mouseover mouseout;
  • option 可以是一个对象也可以是Boolean值.
    • Boolean值时, 事件运行方式true为事件冒泡阶段处理事件(自下而上), 不写传参时为默认false为事件捕获阶段处理(自上而下);
    • Option对象时:
      • capture: 值为true为事件冒泡阶段处理事件;
      • once: true表示添加后只调用一次, 调用后自动移除事件(removeEventListener());
      • passive: true表示永远不会调用 event.preventDefault(); 如果仍然调用会被忽略, 则会抛出wring异常;
• 老版本浏览器为 target.attachEvent('onclick', function);
• 事件移除 removeEventListener();
• 阻止默认事件: event.preventDefault(); example => 点击复选框,点击后复选框高亮, 可以用来阻止复选框选中高亮;
• 阻止事件传播: event.stopPropagation() 阻止事件捕获和事件冒泡; 返回值为 undefined;
• event.stopImmediatePropagation(): 方法阻止监听同一事件的其他事件监听器被调用。表示只能调用当前事件, 其他事件调用失效;
• 行内事件处理器-请勿使用 后期不好维护 尽量JS HTML分开编写
  • example: button onclick="bgChange">press me</button
• addEventListener() and removeEventListener();
• addEventListener() 可以添加多个同一类型的事件不会覆盖。
• removeEventListener(EventName, functionName, option) 移除不需要的事件，且非常高效。
• 事件对象 e/evt/event
  • e.target: 事件源。

Object.defineProperty(objectName, key, option);

• Object.defineProperty()可以直接在一个对象上定义一个新属性, 或者修改一个属性, 并返回该对象;
• option
  • value: 表示该属性的值。
  • writable: true表示可以被赋值运算符改变

let OBJ = {};
Object.defineProperty(OBJ, 'name', {
  value: 'king',
});
console.info(OBJ.name); // king
// getter setter
Object.defineProperty(OBJ, 'name', {
 get: function() {},
 set: function() {},
});