近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充。

一、事件类型

参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

此处为DOM2级事件,DOM3级对事件分解更加详细,后续文章继续整理。

二、事件对象

也就是所谓的event对象。标准浏览器的event对象是通过方法的参数传入的,而ie则是window.event来获取。现将常用的一些事件对象操作总结如下:

标准属性或者方法名 作用 IE兼容事件名
bubbles 判断事件是否冒泡阶段,true表示冒泡阶段  
cancelable 指示事件是否可以取消默认动作  
target 返回触发此事件的元素(事件的目标节点) srcElement
type 返回事件的类型  
preventDefault() 阻止默认事件的执行 returnValue为false表示
stopPropagation() 阻止事件的传播 cancelBubble属性为false

三、如何自定义一个事件

1. 使用document.createEvent创建一个事件。

2.通过对应的“初始化方法”初始化事件对象

3.使用dispatchEvent初始化事件

示例代码如下:

<input type="text" value="text" id="text" />
<button type="button" id="btn">按钮</button>
<div id="foo" style="width: 200px; height: 200px; background: red;" contenteditable="true" ></div>
<script>
var text = document.getElementById('text');
var foo = document.getElementById('foo');
var btn = document.getElementById('btn'); //自定义focus事件
foo.onfocus = function(evt){
evt = evt || window.event;
console.log(evt);
foo.innerHTML += "<br/>发生了focus事件" + ( evt.view ? 'view' : 'dispatch' );
}
if(document.createEvent){
var cFocus = document.createEvent('HTMLEvents');
//参数全是为了兼容IE9+
cFocus.initEvent('focus',true, false);
foo.dispatchEvent(cFocus);
}else{
foo.focus(); //Ie8-下会触发两个
} //dispatch触发按钮事件 btn.onclick = function(){
alert('text: ' + text.value);
text.focus();
}
if(document.createEvent){
var clickHandle = document.createEvent('MouseEvents');
//参数全是为了兼容IE9+
clickHandle.initMouseEvent('click',true,false,window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
btn.dispatchEvent(clickHandle);
}else{
btn.click(); //Ie8-下也只有一次
} </script>

  1. 如果是view触发的事件,event对象上也会有view(视图对象)和which(按的哪个键),而通过dispatchEvent触发的则没有这两个属性
  2. 兼容Ie8-的浏览器,把事件委托当作一个方法调用即可,如我想调用click事件(不带on前缀)
    foo.click

DOM事件第一弹的更多相关文章

  1. DOM事件第二弹(UIEvent事件)

    此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正. 一.uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', i ...

  2. 你真的了解DOM事件么?

    你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...

  3. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  4. jQuery学习之旅 Item8 DOM事件操作

    1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...

  5. 彻底理解H5的DOM事件

    我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互 ...

  6. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. js中DOM事件探究

    事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...

  8. DOM 事件深入浅出(一)

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  9. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

随机推荐

  1. 韩天峰《大话PHP设计模式》听课笔记

    课程主要内容 1.PHP面向对象的高级特性 2.11种设计模式 3.PSR-0,Composer,Phar等最流行的技术 目标 掌握PHP各类设计模式,并具备设计纯面向对象框架和系统的能力   二.编 ...

  2. 机器学习之--线性回归sigmoid函数分类

    import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt import random #sigmoid函数 ...

  3. Pytorch: cuda runtime error (59) : device-side assert triggered at /pytorch/aten/src/THC/generic/THCTensorMa

    更换了数据集, 在计算交叉熵损失时出现错误 : cuda runtime error (59) : device-side assert triggered at /pytorch/aten/src/ ...

  4. Newtonsoft.Json输出Json时动态忽略属性

    一,前言 最近做项目采用Json形式和其他客户端交互,借助于Newtonsoft.Json . 由于业务场景不同,输出的Json内容也不同.要想忽略的属性,可以借助Newtonsoft.Json的特性 ...

  5. DCDC设计指南1

    DC/DC电源设计指导:一 在设计电源模块的时候,第一时间要把该电源IC的datasheet资料下载好,查看里面的说明: 下面以一款DC/DC转换IC为例: 开始布局前先看下IC的特性说明,图1: 图 ...

  6. 动态DP之全局平衡二叉树

    目录 前置知识 全局平衡二叉树 大致介绍 建图过程 修改过程 询问过程 时间复杂度的证明 板题 前置知识 在学习如何使用全局平衡二叉树之前,你首先要知道如何使用树链剖分解决动态DP问题.这里仅做一个简 ...

  7. CTSC2018 被屠记

    占坑 day-1 Gery 和 lll 在火车上谈笑风生 day0 上午 Gery:"我要吊打全场" 下午 Gery 忘带杯子了. Gery:"我过两天碰杯了就可以喝到水 ...

  8. vmware虚机 修改bios方法

    .vmx文件添加以下行,会在下次启动时自动出现bios,并会将"TRUE"改为“false” bios.forceSetupOnce = "TRUE"

  9. worknote

    一.变更注意事项 1.部署平台: a.重启服务时,通过部署平台跳到各服务器操作时,注意修改字符编码为en_US.utf-8 b.服务器之间通过部署平台的dscp命令传输文件到目标服务器:如果连接目标服 ...

  10. Firefox 的兼容问题

    Firefox (火狐) 坑 一, css 文本溢出省略号 单行 :  overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行 : ...