从零开始的全栈工程师——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 ...
随机推荐
- GET/POST/g和钩子函数(hook)
GET请求和POST请求: 1. get请求: * 使用场景:如果只对服务器获取数据,并没有对服务器产生任何影响,那么这时候使用get请求. * 传参:get请求传参是放在url中,并且是通过`?`的 ...
- P4199 万径人踪灭 FFT + manacher
\(\color{#0066ff}{ 题目描述 }\) \(\color{#0066ff}{输入格式}\) 一行,一个只包含a,b两种字符的字符串 \(\color{#0066ff}{输出格式}\) ...
- 最小生成树+LCA【洛谷 P2245】 星际导航
[洛谷 P2245] 星际导航 题目描述 sideman做好了回到Gliese 星球的硬件准备,但是sideman的导航系统还没有完全设计好.为了方便起见,我们可以认为宇宙是一张有N 个顶点和M 条边 ...
- 解决三星官方移植的内核默认是没有打开支持V4L USB devices
在linux比较新的kernel,都标配了各类摄像头的驱动支持,不用我们自己移植驱动,只需通过make menuconfig配置内核支持我们所需的摄像头类型即可.以下是在三星官方内核中配置V ...
- 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall
题目描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来:每头奶牛都只愿意在 ...
- vue.js组件之j间的通讯三,通过单一事件来管理组件通讯
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 去除List集合中的重复值(四种好用的方法)
最近项目中需要对list集合中的重复值进行处理,大部分是采用两种方法,一种是用遍历list集合判断后赋给另一个list集合,一种是用赋给set集合再返回给list集合. 但是赋给set集合后,由于se ...
- JScrollPane (滚动面板)使用心得
注意:使用滚动面板时,必须指定内部组件是哪个组件 JScrollPane的两种使用方式:. 方式一: //直接在创建滚动面板对象时,就指定所要显示的组件 //本例中所要显示的是jPanel JPane ...
- CMOS和BIOS
CMOS是一类特殊的RAM(断电时将丢失其存储内容) BIOS是软件,是程序! CMOS是芯片,是硬件! 实际上我们是通过BIOS这个程序,去设置COMS的参数的.. COMS是一块芯片,继承在主 ...
- 技巧:Ubuntu踩坑记之网络配置哪里找
今天在虚拟机中遇到一个关于网络配置的坑,在此记录下来. 我们都知道虚拟机系统(此处指的是vmware)中,虚拟网络主要由三个方式实现: 桥接网络 NAT转换 主机共享网络 在这三种方式下,一般我们使用 ...