从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)
一、复习
面向对象
1)单例模式
2)工厂模式
3)构造函数
①类
js天生自带的类 基类object function array number math boolean date regexp string
二、事件 浏览器客户端上客户触发的行为都称为事件
所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发
通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法
事件名:onmouseover
onmouseout onmousedown onmousemove onmouseup
Onclick onchange
onfocus onblur 等等
当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上。
我们把他叫事件对象
三、事件对象 event
1.event兼容性:
在Chrome下event是undefined 在ie低版本下是null 分支持event和不支持event 支持event就直接widnow.event 不支持把e在赋值给事件中声明的变量
2.写法:
document.onclick=function(e){var e = e || window.event}
四、事件冒泡
1.什么是事件冒泡
当给父子元素的同一事件绑定时 触发了子元素身上的事件 执行完毕之后 也会触发父级元素的相同事件
这种传播叫事件冒泡
2.解决冒泡
event对象有个属性叫cancelBubble 默认值是false 改成true就取消当前事件冒泡
五、事件捕获
1.事件写法:
①第一种写法:obj.onclick=function(){ }这就相当于给obj的onclick属性赋值是一个道理
↑↑↑这种写法有一点不好 给元素绑定同一个事件的时候 后者会把前者覆盖掉
②第二种写法:
标准浏览器用:addEventListener()这个方法
addEventListener(参数1,参数2,参数3)
参数 1 是事件名 事件名不带on
参数 2 是事件函数
参数 3 布尔值 默认值是false false改成true那么冒泡模型直接变成捕获模型
③id低版本用:attachEvent()这个方法
2.捕获知识点
①ie低版本没有捕获
②普通事件绑定写法没有捕获
3.什么是事件捕获
给父子元素用addEventListener( )绑定同一个事件时 当触发子元素身上的事件 会先触发父元素身上的事件
六、attachEvent()与 addEventListener()二者的区别
1.attachEvent 只用在ie8以下 addEventListener 只用在标准浏览器
2.attachEvent 事件名带on 后者不带on
3.attachEvent 函数里的this是window 而后者函数里面的this是当前元素对象
4.attachEvent 只有冒泡没有捕获 而后者有冒泡也有捕获
七、call( ) 和 apply( )
call 和 apply就是改变 函数 里面的this指向的方法
1.使用
xxx.call() xxx.apply() 特别强调xxx必须是函数(普通函数,类,构造函数)
2.注意
①call( )中的第一个参数是null的时候 函数里的this还是指向原来的 不变
②所有事件都是异步的
从零开始的全栈工程师——js篇2.20(事件对象 冒泡与捕获)的更多相关文章
- 从零开始的全栈工程师——js篇2.10(对象与构造函数)
对象与构造函数 一.js数据类型 基本数据类型:string undefined null boolean number 引用数据类型 Object array function 二 ...
- 从零开始的全栈工程师——js篇(js的异步)
js中的异步 Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任 ...
- 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...
- 从零开始的全栈工程师——js篇2.5
数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...
- 从零开始的全栈工程师——js篇2.1(js开篇)
JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么? 页 ...
- 从零开始的全栈工程师——js篇(闭包)
闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会 ...
- 从零开始的全栈工程师——js篇2.16
js操作css样式 div.style.width=“200px” 在div标签内我们添加了一个style属性 并设定了width值 这种写法会给标签带来了大量的style属性 跟实际项目是不符的 我 ...
- 从零开始的全栈工程师——js篇2.14(表单与计时器)
一.表单 Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 oncha ...
- 从零开始的全栈工程师——js篇2.12(面向对象)
面向对象 Js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差. 所以作者就收到java和c的影响,往面向对象靠齐.Js天生有一个Object ...
随机推荐
- loj #2025. 「JLOI / SHOI2016」方
#2025. 「JLOI / SHOI2016」方 题目描述 上帝说,不要圆,要方,于是便有了这道题. 由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形.上帝把我们派到了一个有 NNN ...
- Div的移动
//JQuery 拖拽本体DIV,把以下代码全部复制即可 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- Opencv图像连通域
[摘要] 本文介绍在图像处理领域中较为常用的一种图像区域(Blob)提取的方法——连通性分析法(连通区域标记法). 文中介绍了两种常见的连通性分析的算法:1)Two-pass:2)Seed-Filli ...
- 黑马JavaScript学习一 BOM之Window对象定时器功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于django的模板层
你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now = datet ...
- mariaDB 远程连接不上
GRANT ALL PRIVILEGES ON *.* TO 'user'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION; // %:表示从任何主机连接 ...
- Idea如何设置代码超出长度限制时自动换行
在[File]-->[Settings]-->[Code Sytle]中勾选[Wrap on typing]选项
- 免费的mysql数据库
https://blog.csdn.net/kernel_/article/details/53320498
- 线程池ThreadPoolExecutor分析: 线程池是什么时候创建线程的,队列中的任务是什么时候取出来的?
带着几个问题进入源码分析: 1. 线程池是什么时候创建线程的? 2. 任务runnable task是先放到core到maxThread之间的线程,还是先放到队列? 3. 队列中的任务是什么时候取出来 ...
- docker(2)安装centos7镜像与容器管理
1.镜像加速器 创建/etc/docker/daemon.json { "registry-mirrors": [ "https://registry.docker-cn ...