DOM事件第二弹(UIEvent事件)
此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。
一、uitls.js(绑定事件公共类)
var fixs = {
'focusin': {
standard: 'focus',
ie: 'focusin'
},
'focusout':{
standard: 'blur',
ie: 'foucsout'
},
'input': {
standard: 'input',
ie: 'propertychange'
}
}
var uitls = {
bindEvent: function(dom, eventType, fun, useCapture){
var fix = fixs[eventType];
if(document.addEventListener){
dom.addEventListener( fix ? fix.standard : eventType, fun, useCapture);
}else{
dom.attachEvent('on' + ( fix ? fix.ie : eventType ), fun);
}
}
};
主要做一些事件名的兼容性处理。
二、baseEvent
事件名 | 说明 |
load | 在内容或页面加载完成后触发。此节点应用于document的节点上(但不能在document上绑定此事件),可以绑定元素:body、img、frame、frameset、iframe、link、script。js对象:image、windows、layer(h5的) |
unload | 在页面或内容被移除时触发。元素:body、frameset;Js对象:window。 |
onbeforeunload | 提示用户是否关闭当前网页 |
abort | 图片加载完成之前被用户终止时触发,元素:img;js对象:image |
error | 资源加载出错被触发,元素:script、img、style;js对象:window,image |
select | 文本被选中触发,js对象:window |
2.1 兼容点
- 当load事件应用在script元素上时,在Ie不支持,需要用onreadystatechange事件来代替(error会作为一个状态来传递);
- script的error,在ie上也是不支持的,也是通过onreadystatechange事件来代替(状态值)。
- select相关兼容性参考:'做一个留言板:输入框'
2.2 一些代码
var img = document.getElementById('img');
var btn = document.getElementById('btn');
uitls.bindEvent(img, 'load', function(event){
console.log('load img');
});
uitls.bindEvent(btn, 'click', function(event){
img.src = '../../img/bck.png';
});
window.onload = function(event){
console.log('window');
}
window.onbeforeunload = function(event){
console.log('window onbeforeunload');
return false;
}
window.onunload = function(evet){
console.log('window unload');
}
img.src='../../img/a.jpg';
- onbeforeunload:可以控制是否向用户提示 离开,还是留在当前页面。
三、焦点事件
不是所有的标签都支持焦点事件,如div(不可编辑状态)、span、p等这类布局和显示内容的标签不支持焦点事件,主要form、以及form下的标签支持焦点事件。
事件名 | 说明 |
focus | 获得焦点,不冒泡 |
blur | 失去焦点,不冒泡 |
focusin | 获得焦点,冒泡 |
focusout | 失去焦点,冒泡 |
DOMFocusin | 获得焦点,不冒泡,遗留方案 |
DOMFocusout | 失去焦点,不冒泡,遗留方案 |
3.1 代理事件的兼容处理方案
- ie、opera、chrome等都支持focusin和focusout,但firefox不支持focusin和focusout。
- 但opera、chrome、firefox的focus和blur不支持冒泡,但支持捕获
3.2 实现代码
<form id="form" >
<input type="text" />
<input type="text" />
</form>
<script src="./uitls.js"></script>
<script>
var _form = document.getElementById('form');
uitls.bindEvent(_form, 'focusin', function(event){
console.log('focusin: ' + ( event.target || event.srcElement ));
}, true);
</script>
设置了addEventListener的第三个参数为true,表示在捕获阶段执行。
3.3 代码触focusin事件
我们这里需要做一个兼容方案处理,在现代浏览器下需要用focus来触发,因为我们绑定是focus事件。
var inputone = document.getElementById('inputone');
var focusinEvent = document.createEvent('UIEvents');
focusinEvent.initUIEvent('focus',true,true); //后面两个参数为true或false都没有影响, 因为focusin发生在捕获阶段
_form.dispatchEvent(focusinEvent); //inputone也可以
四、输入事件(oninput和onpropertychange)
实现输入内容的动态监测。
4.1 区别与兼容性
- oninput为现代浏览器的特性(ie9+都ok),只有改变控件的value才会触发oninput,但js改变value不会触发oninput,并且oninput需要只能通过addEventListener注册
- onpropertychange可以用attachEvent和.onpropertychanage注册,但input为disable=true的不能执行
- oninput,在从浏览器自动下拉提示中选取时,不会触发.
4.2 注意
- onpropertychanage事件,是属性值发生改变就会触发,如果我们一个动作导致两个属性值改变,就会触发两次:
<select id="sel" >
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
var sel = document.getElementById('sel');
uitls.bindEvent(sel, 'input', function(event){
var target = event.target || event.srcElement;
console.log("sel:" + target.value);
});
五、复合事件
事件名 | 说明 |
compositionstart | ime输入开始 |
compositionupdate | ime接受输入框值改变 |
compositionend | ime输入结束 |
说明:
- 这三个事件中传入的event对象,会多一个data属性,代表当前输入的字符。
- 英文输入状态不会触发这三个事件,只有非英文输入才触发(用输入法来确定的)
- ie8-不支持此类事件
5.1 composition与input事件的结合,以及标准浏览与ie、edge的区别
示例代码:
<input id="input" type="text" />
<script src="./uitls.js"></script>
<script>
var input = document.getElementById('input');
uitls.bindEvent(input, 'compositionstart', function(event){ //英文不行,中文可以(识别的是输入法),开始输入状态
console.log('compositionstart: ' + event.target + " " + event.data);
});
uitls.bindEvent(input, 'compositionend', function(event){ //输入结束状态
console.log('compositionend: ' + event.target + " " + event.data)
});
uitls.bindEvent(input, 'compositionupdate', function(event){ //输入过程中,
console.log('compositionupdate: ' + event.target + " " + event.data)
});
uitls.bindEvent(input, 'input', function(event){
console.log('input: ' + input.value);
});
</script>
说明:
- 程序主动触发代码如下:
var compositionstartEvent = document.createEvent('UIEvents');
compositionstartEvent.initUIEvent('compositionstart', false, false);
input.dispatchEvent(compositionstartEvent);
DOM事件第二弹(UIEvent事件)的更多相关文章
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- DOM事件第一弹
近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充. 一.事件类型 参数 事件接口 初始化方 ...
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- iOS - UIEvent事件及UIResponder响应者
在iOS中不是所有的对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,称之为响应者对象: UIApplication.UIViewController.UIView都继承自U ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
随机推荐
- python tesserocr ImportError: dll loading failed 一个不常遇见的错误,以及简单的python安装方法~
废话不多说了,这是写给小白的了. 本人有c#,c/c++开发经验,最近因为偶然的原因,开始接触python,遇到一个棘手的问题,一位朋友在安装tesserocr 包后遇到一个错误,重新安装数次不能解决 ...
- angular简介
1.angular简介 一款非常优秀的前端高级 JS 框架 由 Misko Hevery 等人创建 2009 年被 Google 公式收购,用于其多款产品 有一个全职的开发团队继续开发和维护这个库 有 ...
- Vue使用过程中常见问题
目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...
- VS 2013Ultimate 开发过程中遇到的问题——listbox的隐藏问题,combobox.textchanged的中文问题
最近项目有需求,就是把一个combobox让它可以根据用户输入的汉字就行模糊查询出匹配的下拉框内容,很简单,是吧 但是!!!在开发中真是遇到了不少问题呢. 一.实现流程 1)我的实现思维是这样的,先把 ...
- 针对 jQuery Gridly 控件显示多少列的问题。
针对 jQuery Gridly 控件显示多少列的问题,完全根据 columns 的值来显示. 但是显示columns,并不是给多少值显示几列.到目前还是很模糊的.官方文档没有给出具体的一个解释. $ ...
- 单个 js 文件禁用 ESLint 语法校验
在代码顶部添加一行注释 /* eslint-disable */ ESLint 在校验的时候就会跳过后面的代码 还可以在注释后加入详细规则,这样就能避开指定的校验规则了 /* eslint-disab ...
- pip install –r ./requirements.txt 报错 改成 pip install -r requirements.txt 成功
Invalid requirement: '–r'Traceback (most recent call last): File "/home/dev/.pyenv/versions/3.6 ...
- 利用JavaFx开发RIA桌面应用-在线资料
转载请注明来源-作者@loongshawn:http://blog.csdn.net/loongshawn/article/details/52805751 1.前言 虽说java已经不是主流的桌面应 ...
- angular1.3 video
video标签动态获取播放链接是出现 Error: $interpolate:interr Interpolation Error Error: $sce:insecurl Processing of ...
- win10 音频设备图形隔离 占用CPU
这几天工作很烦!每次上班开机我的电脑就超级卡,自我感觉i7处理器加上8g内存应该杠杠的,打开任务管理器发现就不对了, 有“windows 音频设备图形隔离 ”这个进程吃了我20%的cpu,电脑的风扇也 ...