事件对象 event
-
事件对象兼容处理
-
事件流
事件冒泡
事件冒泡指具体元素接受事件,然后逐级向上传播事件
阻止事件冒泡 event.stopPropagation()
- 案例: 下拉菜单
鼠标事件
-
鼠标移动 onmousemove
-
获取坐标
event.clientX 和 event.clientY是鼠标的可视区坐标
通常情况需要加上滚动距离
- 案例1: 随着鼠标移动的物体
- 案例2: 随着鼠标移动的多个物体
键盘事件
-
键盘按下 obj.onkeydown
-
键盘抬起 obj.onkeyup
-
键盘代码 event.keyCode
-
辅助键 event.ctrlKey event.shiftKey event.altKey
-
案例1:左右键移动物体
-
案例2:ctrl+回车提交
默认行为
默认行为是浏览器的自带行为
-
document.oncontextmenu 右键菜单
-
阻止默认行为
- 方法一 return false
- 方法二 event.preventDefault()
- 案例1:右键菜单
- 案例2:只能输入数字的输入框
拖拽
原理:鼠标和物体的距离始终不变
obj.onmousedown
obj.onmouseup
- 基础拖拽
- 限制在浏览器中
- 限制在父容器中
- 磁性吸附
- 带框的拖拽
- 自定义滚动条(控制大小,控制透明度,控制文字)
事件
-
事件是用户或者浏览器执行的某中动作,如click/mouseover
-
事件处理程序是响应事件的函数,事件处理程序以on开头,如onclick/onmouseover
-
事件绑定
obj.addEventListener(事件名,函数,false)
事件名没有’on’
- 事件移除
obj.removeEventListener(事件名,函数,false)
移除事件监听只能是移除有函数名的,不能移除匿名函数的### 对象的基本概念
- 什么是对象
对象就是一个可以提供特定功能的黑盒子,使用者不用关心功能的具体实现,只要知道怎么用就可以了
举例:电视就是一个对象,通过遥控器或者电视面板上的按钮操作电视
- 什么是面向对象的程序设计
开发具有特定功能的黑盒子
- 对象学什么
- 使用对象 如:Date/Array/Math…
- 开发自己的对象
- 对象的特点
- 封装 把具体的功能实现包起来,对外不公开
- 抽象 根据具体的业务需求把需要的属性和方法抽取出来
- 继承 子类具有父类的方法和属性,然后子类再开发自己特有的方法和属性
- 多态 把子类赋给父类,赋值后的父类具有子类的特性
- 对象的组成
- 属性(变量)
- 方法(函数)
创建对象
- 字面量创建
- 单体对象,适合整个系统只有一个对象的场景
- 对象属性的特征:无序唯一
- 对象属性特征的应用,去除重复数组
- 把数组里面的值转换为对象的属性,由于对象的属性不能重复,所以此时对象的属性就把重复的值过滤掉
- 把对象的属性转换为数组的值
- js对象和json的区别
- json是一种数据传输格式,js对象是类的实例,不能直接传输
- json的键必须添加双引号,值不能是函数,js对象键不用加双引号,值可以是任意类型,如果js对象的属性不是一个合法的变量名时需要加双引号
- json可以通过JSON.parse(jsonstr)转换为js对象,js对象可以用JSON.stringify(jsobj)转换为json
- 构造函数创建
- 用系统自带的对象创建对象
- 缺点:会有把系统自带的方法和属性覆盖掉的风险
- 用Object对象来创建对象
- Object是所有对象的父类
- 创建的对象方法和属性不能共用
- 用工厂模式的函数创建对象
- 不能用new来创建对象
- 方法不能被实例共享,每个对象实例都生成一个相同的方法
- 用new关键字创建对象 - 构造函数
- new 的作用,函数会在一开始创建一个对象,并且这个对象就是this,最后会把这个this对象返回出去
- 直接用new后可以把用工厂模式函数中创建对象和返回对象省略,但是方法还是不能被实例共享
- 用new后,把工厂模式函数可以看做是类,类名一般首字母大写
- 构造函数方法共享-将构造函数里面的方法指向全局函数
- 缺点1.全局函数会在其他地方调用,这时会有风险
- 缺点2.如果方法太多,就需要创建大量的全局函数
- 缺点3.违背面向对象的封装特性
- 构造原型模式
- 原型 prototype 是存在于构造函数上的一个对象,所有的实例对象都可以访问原型对象
- 可以在原型对象prototype添加共用的属性或者方法
- 变化的属性和方法写在构造器中
- 动态原型模式
- 可以把原型对象prototype上的定义写在构造函数中,定义之前需要唯一执行判断
内存分析
![](img/014-001.png)
面向对象案例:
- 选项卡
- 拖拽
- 轮播图