DOM事件第一弹
近期温习了部分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>
- 如果是view触发的事件,event对象上也会有view(视图对象)和which(按的哪个键),而通过dispatchEvent触发的则没有这两个属性
- 兼容Ie8-的浏览器,把事件委托当作一个方法调用即可,如我想调用click事件(不带on前缀)
foo.click
DOM事件第一弹的更多相关文章
- DOM事件第二弹(UIEvent事件)
此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正. 一.uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', i ...
- 你真的了解DOM事件么?
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- jQuery学习之旅 Item8 DOM事件操作
1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...
- 彻底理解H5的DOM事件
我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互 ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- js中DOM事件探究
事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
随机推荐
- 韩天峰《大话PHP设计模式》听课笔记
课程主要内容 1.PHP面向对象的高级特性 2.11种设计模式 3.PSR-0,Composer,Phar等最流行的技术 目标 掌握PHP各类设计模式,并具备设计纯面向对象框架和系统的能力 二.编 ...
- 机器学习之--线性回归sigmoid函数分类
import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt import random #sigmoid函数 ...
- 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/ ...
- Newtonsoft.Json输出Json时动态忽略属性
一,前言 最近做项目采用Json形式和其他客户端交互,借助于Newtonsoft.Json . 由于业务场景不同,输出的Json内容也不同.要想忽略的属性,可以借助Newtonsoft.Json的特性 ...
- DCDC设计指南1
DC/DC电源设计指导:一 在设计电源模块的时候,第一时间要把该电源IC的datasheet资料下载好,查看里面的说明: 下面以一款DC/DC转换IC为例: 开始布局前先看下IC的特性说明,图1: 图 ...
- 动态DP之全局平衡二叉树
目录 前置知识 全局平衡二叉树 大致介绍 建图过程 修改过程 询问过程 时间复杂度的证明 板题 前置知识 在学习如何使用全局平衡二叉树之前,你首先要知道如何使用树链剖分解决动态DP问题.这里仅做一个简 ...
- CTSC2018 被屠记
占坑 day-1 Gery 和 lll 在火车上谈笑风生 day0 上午 Gery:"我要吊打全场" 下午 Gery 忘带杯子了. Gery:"我过两天碰杯了就可以喝到水 ...
- vmware虚机 修改bios方法
.vmx文件添加以下行,会在下次启动时自动出现bios,并会将"TRUE"改为“false” bios.forceSetupOnce = "TRUE"
- worknote
一.变更注意事项 1.部署平台: a.重启服务时,通过部署平台跳到各服务器操作时,注意修改字符编码为en_US.utf-8 b.服务器之间通过部署平台的dscp命令传输文件到目标服务器:如果连接目标服 ...
- Firefox 的兼容问题
Firefox (火狐) 坑 一, css 文本溢出省略号 单行 : overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行 : ...