Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

JavaScript事件（续）

事件对象

事件触发时，如果事件处理函数含有一个参数，该事件就会把一个指向被触发的元素的引用传给该函数。通常把参数命名为e,evt或event（尽管无所谓）。

  function doSomething(e){
    ...
  }
  btn.addEventListener('click',doSomething);

事件冒泡和捕获

事件发生时，浏览器运行两个阶段——冒泡阶段和捕获阶段。

冒泡阶段：

浏览器检查事件发生的最小元素是否注册该事件，如果注册了就运行。然后移动到其父元素做同样的事，直到html元素。
捕获阶段：

和冒泡阶段完全相反，从html元素检查到最小子元素。

默认情况下所有事件处理器都注册在了冒泡阶段。如果要阻止进一步冒泡检查，使用stopPropagation() 。

btn.onclick = function(e) {
  e.stopPropagation();
  ...
};

事件委托

基于上面的冒泡机制，如果大量的子元素要做同样的事并且拥有同一个父元素，则可以将事件处理器设置在其父元素上。

JavaScript对象

对象的简单创建与使用

下列例子创建了一个对象：

var person = {
  name : {
    first : 'Evo',
    last : 'Lonation'
  },  
  age : 20,
  gender : 'male',
  //属性
  greetingTo: function(obj) {
    alert('Hi, '+obj+'! I\'m ' + this.name[0] + '.');
  }
  //方法
};

此创建方法称为对象的字面量——手写对象。

var objectName = {
  member1 : Value1,
  member2 : Value2,
  member3 : Value3
}

可以用一个子对象最为对象成员的值。

var person = {
  name : {
    first : 'Evo',
    last : 'Lonation'
  }, 
}

可以对创建好的对象创建新的成员：

person['school'] = 'BUAA'
person.eat = function(food) { alert("Yummy yummy, '+food+' is dilicious.") }

JavaScript学习笔记 .4——事件(续)与对象的简单使用