JavaScript：自定义对象

二.自定义对象

1.如何创建自定义对象

1.1直接量

• var student = {"name":"zs","age":23};
• {} 代表一个对象，内含多组键值对
• key一般都是字符串，而value可以是任意类型的数据

采用直接量方式创建的对象也叫JSON对象

1.2构造器

1）内置构造器(new的函数/首字母大写)

• 特殊：Array,Date,RegExp,Function
• 通用: Object

2）自定义构造器

• 声明一个函数，首字母要大写
• 声明参数，让调用者清楚要传什么参数
• 让对象记住这些参数

2.总结

• 无论用哪种方式创建出来的对象都一样，都是Object
• 若创建的对象给别人用，建议使用第3种（自定义构造器创建对象）方式
• 若创建的对象给自己用，用第1（采用直接量）、2（采用内置构造器）都行
• 若没有函数用第1种，否则建议用第2种

三.事件

1.事件的概述

1）什么是事件

• 就是用户的动作，就是js调用的时机

2）事件的分类

• 鼠标事件
• 键盘事件
• 状态事件：达到某个条件（状态）自动触发

2.事件的定义

1）直接定义事件

• 在元素上通过事件属性（如：onclick）定义事件
• 优点：很直观
• 缺点：HTML和JavaScript耦合度高

2）后绑定事件（*）

• 在页面加载后，使用js获取元素，并给他绑定事件
• 优点：HTML和js耦合度低
• 缺点：不直观

3)取消事件

• 在事件内return false

演示：

3.事件对象

1）什么是事件对象

• 当事件被触发时，有一些信息被确定下来
• 如：点击的是左键还是右键、点击的位置（坐标），按键
• 开发项目时，可能需要使用这些信息（较少）
• 浏览器为了方便开发者，将这些信息封装到一个对象里
• 这个对象叫event事件对象

2）如何获取事件对象

直接定义事件

• 在调用函数时直接传入event
• 在写这个函数时加参数来接收它

后绑定事件

• 触发事件时，浏览器会自动给函数传入event
• 在写这个函数时加参数来接收它

事件对象演示

4.事件处理机制

1)冒泡机制

• 事件由内向外传播
• 这种规律称之为冒泡机制

冒泡机制的作用

• 可以简化事件的定义
• 可以在父元素上定义一个事件，接收众多子元素的事件

需要知道事件源

3）事件源

• 事件发生的具体位置
• 事件发生的源头
• 通过事件对象可以获取事件源

计算器案例

计算器案例效果.png

• 源码如下: