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还是指向原来的指向不变
所有的事件都是异步的!!!
JS高级:事件冒泡和事件捕获;的更多相关文章
- js高级:event,事件冒泡,事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- JS事件(事件冒泡和事件捕获)
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- JS事件冒泡与事件捕获怎么理解?
在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...
- JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- js 事件冒泡和事件捕获
事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- JS事件冒泡和事件捕获的详解
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...
随机推荐
- Android忽略文件
转自我自己的博客...Android Studio上传项目到GitHub
- asp.net 将文本转化为文本文件txt文件
/// <summary> /// 将文本写入文本文件 /// </summary> /// <param name="name">完整文件名& ...
- 吴裕雄 python神经网络 水果图片识别(4)
# coding: utf-8 # In[1]:import osimport numpy as npfrom skimage import color, data, transform, io # ...
- Linux 中文输入法安装
问题一:文本不能输入中文,所以考虑到要安装搜狗输入法,在 Oracle VM VirtualBox 新建的Ubuntu系统应用中心,安装输入法总是安装失败,在自己电脑上下载了Linux的输入法文件. ...
- Java字节流Stream的使用,创建方法
首先:FileOutputStream写入数据文件 学习父类的方法 使用子类的对象 步骤: 1:子类中的构造方法 作用 :绑定输出的目的地 FileOutputStream fos= new F ...
- Mesh.CombineMeshes
[Mesh.CombineMeshes] public void CombineMeshes(CombineInstance[] combine, bool mergeSubMeshes = true ...
- Android笔记:Button
示例代码摘自<第一行代码> ButtonDemo.java的代码: public class ButtonDemo extends Activity { @Override protect ...
- ubuntu 印象笔记
1. 印象笔记剪裁,直接浏览器上百度搜索,下载浏览器插件,登陆即可.(不过,我遇到个问题,浏览器登陆的服务器貌似是国际版的,与pc上的服务器不同,也没有成功转换过来.两账户相互独立.) 2. 印象笔记 ...
- 关于 No buffer space available (maximum connections reached?): connect 的处理
一.问题: hudson一个应用打包部署一直不成功,检查报错 检查项目的JOB配置,开始以为是SVN的问题,但是重启SVN后问题一直存在 二.分析: TCP协议中,关闭TCP连接的是Server端(当 ...
- tf.layers.dense()
tf.layers.dense用法 2018年05月30日 19:09:58 o0haidee0o 阅读数:20426 dense:全连接层 相当于添加一个层,即初学的add_layer()函数 ...