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上的定义写在构造函数中,定义之前需要唯一执行判断
内存分析
面向对象案例:
- 选项卡
- 拖拽
- 轮播图
JS事件、对象基础篇相关推荐
- Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)
在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发. 本篇例举几个常见的,方便理解.以及一些效果 文章目录 前言 一.AxesHelper 二.BoxHelper 三.Box3He ...
- Node.js后端开发 - 基础篇 #18 nodemon工具
文章目录 前言 nodemon工具简单介绍 nodemon工具安装 nodemon工具使用(node app.nodemon app) nodemon工具使用(npm run start) 前言 上篇 ...
- 3.3.1JavaScript网页编程——WebAPI（JS之DOM基础篇，含事件）
目录 DOM和BOM DOM 根据CSS选择器来获取DOM元素 (重点) 选择引号里面加**css选择器** 获取页面标签querySelect和querySelectAll 其他获取DOM元素方法( ...
- Js事件对象EventUtil
1 var EventUtil = { 2 getEvent: function(event){ //获取事件对象 3 return event ? event : window.event; 4 } ...
- JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
- JS事件对象5--阻止默认事件(鼠标事件)
阻止默认事件的两种方式和兼容方式: <script type="text/javascript">//阻止系统默认事件的两种方式://1.IE:return false ...
- 【android免root脚本制作】总览Auto.js开发小结——基础篇
Auto.js是什么 Auto.js是一款写脚本,ui界面,运行脚本,制作简单安卓app的一体式软件.并且是全开源的免费APP,类似于按键精灵,而且本软件有全部按键精灵的功能,还有其他例如控件操作等, ...
- [js] 事件对象 e.target offsetX clientX pageX
鼠标相关事件 e.target 触发事件的标签对象 - e.target.innerText:点击标签的本文内容- e.target.tagName :点击标签的标签名称,标签名称是大写字符- e.t ...
- JS服务器端开发基础篇（Array.slice方法和splice方法）
Array.slice方法和splice方法在众多的JS数组中属于比较复杂的一个方法,而且容易记混.搜索网络上很多资料都没有发现系统的总结.特别归纳如下,不完全处还希望各位批评指正. 一.slice ...
最新文章
- CI框架验证码CAPTCHA 辅助函数的使用
- 【Linux】Linux 简单操作指令之磁盘管理
- cass坡度土方计算案例_南方CASS方格网土方计算心得
- bdd行为驱动开发 java_行为驱动开发(BDD)如何与领域驱动设计(DDD)结合？
- Dataset之WebVision：WebVision数据集简介、下载、使用方法之详细攻略
- AUP2敏捷统一过程之一：序言及降低过程的总体拥有成本
- javaweb学习总结(二十六)——jsp简单标签标签库开发(二)
- Android -- 创建XML文件对象及其序列化， pull解析XML文件
- Centos7安装部署Zabbix3.4
- 数据库MySQL(课下作业，必做)
- 基本存款账户编号怎么查_上海社会保障卡查询个人账户怎么查
- seaborn箱线图_Seaborn线图的数据可视化
- csv文件的读写--示例
- PHPExcel基本使用
- [系统安全] 十二.熊猫烧香病毒IDA和OD逆向分析（上）病毒初始化
- 云信服务器代码,网易云通信ID-服务端API文档-IM即时通讯-网易云信开发文档
- java opencv 基本操作4
- iphone上安装android系统,如何在iPhone上安装Android操作系统
- 【周赛266】leetcode2062.统计字符串中的的元音子字符串
- Windows11专业版安装USBCAN-II驱动后报错“……无法加载这个硬件的设备驱动程序……（代码39）”解决方案