美文网首页
事件(上)

事件(上)

作者: 梨啊梨 | 来源:发表于2018-01-05 13:25 被阅读0次

事件流

所谓事件流就是从页面中接收事件的顺序。

冒泡事件

IE的事件流叫做冒泡事件,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。

所有现代浏览器都支持事件冒泡,但是具体实现上有一点区别。

IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象

div→body→html→document

事件捕捉

和冒泡事件相反,他是从不具体的节点到最具体的节点传播的。

IE9、Firefox、Chrome和Safari同样支持事件捕捉。

很少有人用事件捕捉,因为DOM2级事件规范要求事件应该从document对象开始传播。

DOM事件流

首先发生的是时间的捕捉,为截取事件提供了机会,然后接受到事件,再从冒泡阶段对事件作出响应。


事件处理程序

响应某个事件的函数就叫事件处理程序或者监听器。事件处理程序的名字都以“on”开头

1. HTML事件处理程序

① 直接写进去

② 通过js页面调用

DOM0级事件处理程序

 通过获取元素,独立设置点击事件

this运行环境是局部

btn.onclick=null     //删除事件处理程序

DOM2级事件处理程序

IE事件处理程序

attachEvent()和detachEvent()

同样可以添加多个事件,但是他的响应的顺序是反的,即先bb再aa,同样不能移除匿名事件

可以移除事件

跨浏览器事件处理程序


事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关信息。包括导致事件的元素、事件类型以及其他特定事件信息。所有浏览器都支持event对象。但支持的方式不同。

DOM中的事件对象

兼容DOM上的浏览器会将一个event对象传入到事件处理程序中,无论指定事件处理程序使用的什么方法,都会传入event对象。

随便举一些常用的event对象的属性和方法:

cancelable:是否可以取消事件默认行为

bubbles:表明事件是否冒泡

currentTarget:事件处理程序当前正在处理事件的那个元素

preventDefault():取消事件默认行为,cancelable必须设置为true

target:事件的目标

type:被触发的事件的类型

按钮添加了三个事件

阻止特定事件的默认行为:

阻止a链接的点击跳转行为

IE中的事件对象

与dom中的event对象不同,IE中的event对象是根据指定事件处理程序的方法来决定的。

在使用DOM0级方法添加事件时,event对象作为window对象的一个属性存在。

如果事件处理程序使用的attachEvent()添加时,event对象作为参数被传入事件处理程序函数中

跨浏览器的事件对象


相关文章

  • 事件(上)

    事件流 所谓事件流就是从页面中接收事件的顺序。 冒泡事件 IE的事件流叫做冒泡事件,即事件开始时由最具体的元素接收...

  • 事件上

    typora-copy-images-to: media 事件对象(上) 事件复习 事件三要素: 事件源 + 事...

  • 减肥事件(上)

    春节之后,长肉很快。居然稳居120斤下不来了。很想减肥,可是又忍不住吃的诱惑,犹犹豫豫,都快长到125了。 正有减...

  • 上滑触发事件

    // 上滑查看时继续加载 在scroll事件中处理

  • 原生js事件上

    各种事件 鼠标事件 onclick 单击事件 oncontextmenu 鼠标右击时触发 ondblclick 鼠...

  • 幸运失踪事件(上)

    文/鱼筱豆 01 她叫幸运,在一家报社工作,是一名负责采风的记者,专门到世界各地深挖各种神秘事件。 这一天,她被主...

  • 古装拍摄事件(上)

    2019年12月我和小伙伴在微信朋友圈看到关于XX古装拍摄的信息流广告,广告内容大概是水瓶座两人同行可9.9元拍摄...

  • 灵异事件(上)

    灵异是什么?就我的理解,就是那事儿和鬼神有关,人们通常都把它称之为灵异事件。尽管,我们接受无神论教育已经快百年了,...

  • JavaScript--事件(上)

    一、事件的概述 1、JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意...

  • Android触摸事件(上)——事件的由来

    从接触Android开发以来,貌似Android的事件就一直伴随着我。从一开始的setOnclickListene...

网友评论

      本文标题:事件(上)

      本文链接:https://www.haomeiwen.com/subject/chgrnxtx.html