JavaScript事件总结

最新推荐文章于 2024-04-28 17:13:07 发布

C0C0D

最新推荐文章于 2024-04-28 17:13:07 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏：新手文章标签： java

本文链接：https://blog.youkuaiyun.com/C0C0D/article/details/105816114

新手专栏收录该内容

31 篇文章

订阅专栏

文献种类：专题技术总结文献；
开发工具与关键技术：DW与 JavaScript
作者：陈良鑫；年级： 19 ；撰写时间： 2020 年 4 月 28 日

JavaScript事件总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：陈良鑫
撰写时间：2020年4月28日

我们可以在事件对应的属性中设置js代码，这样当事件被触发的时候，这些代码就会被执行

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript 与 HTML 之间的交互是通过事件实现的。
- 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
事件就是用户与浏览器的交互行为
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘那个按键被按下，鼠标滚轮滚动的方向
  在IE8中，响应函数被触发时，浏览器不会传递事件对象，
  在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
  获取滚动条滚动的距离
  Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
  火狐等浏览器认为浏览器的滚动条是HTML的
  最新的Chrome浏览器中可以使用document.documentElement.scrollTop获取值
  JavaScript事件冒泡（Bubble）
- 所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的，如果不希望冒泡发生可以通过事件对象取消冒泡
  事件的委派
- 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
- 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
  事件对象的属性target：返回触发此事件的元素(事件的目标节点)
  为每一个a标签绑定一个单击响应事件，这种操作比较麻烦
  而且这种操作只能为已有的a标签绑定单击事件，新添加的超链接需要重新绑定
  我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

使用对象.事件=函数形式绑定事件
它只能同时为同一个元素绑定同一事件一次
不能绑定多次，如果绑定多次，后面的会覆盖掉前面的
addEventListener()
- 通过这个方法也可以为元素绑定响应函数
- 参数：
1.事件的字符串，不加on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数：
1.事件的字符串，要on
2.回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数
不同的是它是后绑定先执行，执行顺序和addEventListener()相反参数：
obj 要绑定事件的对象
addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法的this
eventStr 事件的字符串(不要on)
callback 回调函数
事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
  一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
- IE8及以下的浏览器中没有捕获阶段
  设置btn1对鼠标按下相关的事件进行捕获
  当调用一个元素的setCapture()方法以后，
  这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
  setCapture()
  - 只有IE支持，但是在火狐中调用时不会报错，
  而如果使用chrome调用，则会报错
  
  链接
  发表平台文章发表网站链接URL 文章发表网站链接【二维码】发表者
  优快云个人博客
  https://blog.youkuaiyun.com/

https://blog.youkuaiyun.com/weixin_44563954/article/details/86534500

 	学生本人

陈良鑫
优快云专业技术论坛
https://bbs.youkuaiyun.com/
.NET、Java、Web、数据库开发、企业IT（地理信息系统）、云计算、移动开发、开发语言等每个月发布在同一个主题下，每个月的网页链接和二维码都是同一个。学生本人

陈良鑫

https://bbs.youkuaiyun.com/topics/392512019

百度贴吧：广信IT学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%BF%A1it%E5%AD%A6%E9%99%A2

（百度贴吧正文开头添加本文章优快云的两个发表链接）每个月发布在同一个主题下，每个月的网页链接和二维码都是同一个。学生本人

陈良鑫

百度贴吧：广东信息科技职业培训学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%B8%9C%E4%BF%A1%E6%81%AF%E7%A7%91%E6%8A%80%E8%81%8C%E4%B8%9A%E5%9F%B9%E8%AE%AD%E5%AD%A6%E9%99%A2
（百度贴吧正文开头添加本文章优快云的两个发表链接）学生本人

陈良鑫
广信IT学院
官网
www.gxrjxy.cn