JS的原生事件

javascript原生的事件包括事件流、处理函数、事件对象等。而在兼容性也有问题。

1事件流

事件流是ie和Netscape提出来的,但是两个公司提出的事件流确实刚好相反的。ie是事件冒泡,Netscape是事件捕获。

ie会从触发事件的元素一直往上冒泡直到document元素。

Netscape则是从document元素开始往下传播一直到触发事件的元素

2事件处理函数
这里有3种方法:

DOM元素绑定事件,

HTML标签内绑定事件,

事件监听绑定事件

我就不一一介绍了。

3事件对象

在js中所有的事件对象都继承自Event。

在不同的浏览器中Event对象还是有区别的。

但是属性和方法还是公用的:

bubbles 是否冒泡

cancelable 是否可以取消默认行为

currentTarget 目前元素

target 目标元素

defaultPrevented 是否已被阻止默认行为

type 事件类型

eventPhase 事件流哪个阶段

detail 信息

trusted js创建的为false,浏览器创建为true

view 等同于window

preventDefault() 阻止默认行为

stopPropagation() 阻止冒泡和捕获

stopImmediatePropagation() 立即阻止冒泡和捕获

但是ie8又不同了,它的事件对象是这样的:

cancelBubble 是否取消冒泡

returnValue 返回值

srcElement 目标元素

type 事件类型

还有其他的一些事件,如:

load:页面、img图像、所有框架、嵌入内容加载完后在object元素触发。

unload:离开页面时触发

resize:调整浏览器窗口大小

scroll:滚动事件

focus:得到焦点触发

blur:失去焦点触发

鼠标事件:

click:点击

dblclick:双击

mousedown/mouseup:按下抬起

mouseenter:鼠标移入

mouseleave:鼠标移出

mouseover:鼠标经过

mousemove:鼠标在元素内移动

在DOM标准中还有这些

clientX、clientY:当前位置

detail 单击次数

ctrlKey

altKey

metaKey

shiftKey

pageX、pageY

screenX、screenY 等等。

学的不精,总结的不到位。还请见谅。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,019评论 3 11
  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 4,531评论 0 9
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,158评论 1 10
  • 本章内容 理解事件流 使用事件处理程序 不同的事件类型 JavaScript 与 HTML 之间的交互是通过事件实...
    闷油瓶小张阅读 1,943评论 0 0
  • 最近因为通过hexo搭建了一个简易的个人静态博客,因为嫌弃hexo部署冗杂的步骤,所以研究了一些自动化部署的机制,...
    Jaren_lei阅读 14,615评论 10 33