JS高级:事件冒泡和事件捕获;
1、事件:浏览器客户端上客户触发的行为成为时事件;所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发
当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做事件对象
2、获取鼠标的坐标
event.clientX;event.clientY
document.onclick=function(){
event.clientX
event.clientY
}
3、关于event的兼容性
标准:event是undefined
非标准:null
解决兼容: var e=e||windoe.event
4、事件冒泡:
当给父子元素同一事件绑定方法的时候,触发了子元素的事件,执行完毕后,也会触发父级元素的相同时间,这种传播机制叫做事件冒泡
取消事件冒泡:event.cancelBubble=true
5、事件捕获:
给父子元素用addEventLIstener()绑定统一个事件,会先触发父元素,然后再传递给子元素,这种传播机制叫做事件捕获
(1)IE低版本没有事件捕获
(2)普通的事件绑定写法没有事件捕获
给元素绑定事件,有两种
(1)常用的写法:
obj.onclick=function(){}
这个写法有缺点,如果一个元素绑定相同的事件多次,后者会覆盖前者,因此这个写法相当于给obj的onclick的属性赋值
(2)第二种写法
标准浏览器用:addEventListener()
非标准用:attachEvent()
addEventListener(参数1,参数2,参数3)
参数1:事件名,并且不带"on"
参数2:事件函数
参数3:布尔值,代表捕获不捕获,默认值是false,不捕获单冒泡
attathEvent()和addEventListener()的区别
(1)attachEvent()只用在IE8以下,addEventListener()适合标准浏览器
(2)attachEvent()的事件名带on,addEventListener()的事件名不带on
(3)attachEvent()函数里面的this是undefined,addEventListener()的函数里面的this是当前元素对象
(4)attachEvent()只有冒泡没有捕获,addEventListener()有冒泡也有捕获
call和apply
都是改变this的指向的方法,而且是函数对象、类、构造函数
call和apply的第一个参数是null的时候,函数里面的this还是指向原来的指向不变
所有的事件都是异步的!!!
最新文章
- Android从网络某个地址下载文件、写入SD卡
- 【工业串口和网络软件通讯平台(SuperIO)教程】九.重写通讯接口函数,实现特殊通讯方式
- SQL Server自动化运维系列——关于邮件通知那点事(.Net开发人员的福利)
- C# 调用存储过程操作 OUTPUT参数和Return返回值
- tomcat PermGen space
- form属性method=";get/post
- cf 605A Sorting Railway Cars 贪心 简单题
- OpenGl学习笔记3之模型变换、视图变换、投影变换、视口变换介绍
- 一个Hibernate小程序
- POJ 3468<;线段树,区间add>;
- 网站环境apache + php + mysql 的XAMPP,如何实现一个服务器上配置多个网站?
- TensorBoard:Visualizing Learning 学习笔记
- css实现的交互运动
- shell脚本基础 循环机构
- Tornado框架配置使用Jinja2模板引擎
- Linux编程 23 shell编程(结构化条件判断 命令if -then , if-then ... elif-then ...else,if test)
- ImageMagick: 6.8.3 升级到 6.8.9 遇到的问题
- 4A Watermelon
- qt5.6.3下使用firebird
- Go语言中映射表map的使用
热门文章
- wParam与lParam的区别
- 吴裕雄 27-MySQL 元数据
- 用Lucene4.5对中文文本建立索引
- CSS 颜色
- centos7 防火墙 开启端口 并测试
- Python列表推导式
- 内核进程切换 switch_to
- Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test)
- Linux命令_1
- 递归算法结合数据库 解析 java树形结构