JS事件、对象基础篇

事件对象 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上的定义写在构造函数中,定义之前需要唯一执行判断

内存分析

面向对象案例:

• 选项卡
• 拖拽
• 轮播图