DOM事件

事件注册

eventTarget.addEventListener(type,listener[,usecapture])

type:事件类型      listener:事件处理函数     useCapture:可选参数,是否是捕获过程

例一

取消时间注册

eventTarget.removeEventListener(type,listener[,usecapture])

例二

事件触发

eventTarget.dispatchEvent(type)

例三

浏览器兼容性(IE6  7  8)

      事件注册与取消

              attchEvent     /   detachEvent

      事件触发

              fireEvent(e)

       no  capture

     阻止事件传播

      event.stopPropagation()    //W3C

      event.cancelBubble()         //IE

      默认行为

       event.preventDafault()     //W3C

       event.returnValue=false()  //IE

浏览器兼容(代码)

兼容

事件分类:

1 MouseEvent(鼠标事件)

鼠标事件分类

MouseEvent对象

属性:clientX  clientY(到页面的距离坐标)screenX screenY(到屏幕的顶端的距离坐标)

MouseEvent顺序

鼠标顺序

一个例子:拖拽div

样式
js

WheelEvent(滚轮事件)

滚轮事件

FocusEvent(获得和失去焦点事件)

事件类型

InputEvent(输入事件)

输入事件类型

KeyboardEvent(键盘事件)

键盘事件类型

其他的事件(Event)

其他事件

    Window事件

load   unload   error    abort

    Image标签事件

load(图片加载完成)    error(图片加载错误)    abort

image标签事件

    UIEvent事件

UI事件

事件代理

      将事件注册到元素的父节点上


         这是自己学习的一些笔记,供自己在学习中查阅,每天努力一点点,加油

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、DOM事件 文档对象模型是一种与编程语言及平台无关的API(Application programming I...
    8d2855a6c5d0阅读 1,567评论 0 0
  • 文中涉及大量内容来自于PPK的博客 现代前端开发应该要遵守: html展示文档内容,css渲染页面效果,javas...
    江枫阅读 4,095评论 0 8
  • 问答题 1、dom对象的innerText和innerHTML有什么区别? innerText特性用来修改起始标签...
    咸吧阅读 3,222评论 0 0
  • JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、浏览器...
    深沉的简单阅读 2,635评论 0 0
  • 戈壁的风, 来时凶猛, 去时悄然无声。 戈壁的风, 带来了富裕, 也带来了灾难。 戈壁的风, 有时柔情似水, 如春...
    期雨落阅读 3,315评论 0 1

友情链接更多精彩内容