专栏首页cnblogsDOM事件第二弹(UIEvent事件)

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 兼容点

  1. 当load事件应用在script元素上时,在Ie不支持,需要用onreadystatechange事件来代替(error会作为一个状态来传递);
  2. script的error,在ie上也是不支持的,也是通过onreadystatechange事件来代替(状态值)。
  3. 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';
  1. onbeforeunload:可以控制是否向用户提示 离开,还是留在当前页面。

三、焦点事件

不是所有的标签都支持焦点事件,如div(不可编辑状态)、span、p等这类布局和显示内容的标签不支持焦点事件,主要form、以及form下的标签支持焦点事件。

事件名

说明

focus

获得焦点,不冒泡

blur

失去焦点,不冒泡

focusin

获得焦点,冒泡

focusout

失去焦点,冒泡

DOMFocusin

获得焦点,不冒泡,遗留方案

DOMFocusout

失去焦点,不冒泡,遗留方案

3.1 代理事件的兼容处理方案

  1. ie、opera、chrome等都支持focusin和focusout,但firefox不支持focusin和focusout。
  2. 但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 区别与兼容性

  1. oninput为现代浏览器的特性(ie9+都ok),只有改变控件的value才会触发oninput,但js改变value不会触发oninput,并且oninput需要只能通过addEventListener注册
  2. onpropertychange可以用attachEvent和.onpropertychanage注册,但input为disable=true的不能执行
  3. oninput,在从浏览器自动下拉提示中选取时,不会触发.

4.2 注意

  1. 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输入结束

说明:

  1. 这三个事件中传入的event对象,会多一个data属性,代表当前输入的字符。
  2. 英文输入状态不会触发这三个事件,只有非英文输入才触发(用输入法来确定的)
  3. 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>

说明:

  1. 程序主动触发代码如下:
var compositionstartEvent = document.createEvent('UIEvents');
compositionstartEvent.initUIEvent('compositionstart', false, false);
input.dispatchEvent(compositionstartEvent);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • knockout源码分析之订阅

    一、主类关系图 ? 二、类职责 2.1、observable(普通监控对象类) observable(他其是一个function)的内部实现: 1.首先声明一个...

    sam dragon
  • cordova环境搭建

    说明:gradle下载后,解压到硬盘某个目录即可;安装步骤:java->node->adb-studio

    sam dragon
  • Event(事件)的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

    sam dragon
  • 怎么入门html5绘制图形?你需要了解这几点!

    html5中可以实现绘画图形的功能,需要注意的是html5只提供2D,不提供3D绘画功能。canvas元素是H5总新增的元素,它用来专门绘制图形。你也可以把ca...

    用户5827212
  • Python命名规范

    包 应该是简短的、小写的名字。如果下划线可以改善可读性可以加入。如mypackage。

    py3study
  • Nexus 使用 nginx 代理支持 HTTPS 协议

    公司全部网站需要支持 HTTPS 协议,在阿里云负载均衡配置 SSL 证书后,导致 Nexus 的 HTTPS 访问出错。

    叨叨软件测试
  • PyTorch专栏(二十一):使用Sequence2Sequence网络和注意力进行翻译

    这可以通过序列到序列网络来实现,其中两个递归神经网络一起工作以将一个序列转换成另一个序列。编码器网络将输入序列压缩成向量,并且解码器网络将该向量展开成新的序列。

    磐创AI
  • Python 学习入门(23)—— 进程

    本文介绍Python的os包中有查询和修改进程信息的函数,Python的这些工具符合Linux系统的相关概念,所以可以帮助理解Linux体系。

    阳光岛主
  • Vapor奇幻之旅(02部署)

    在Vapor奇幻之旅(01开篇) 中我介绍了如何用swift来构建web应用,这篇文章我会介绍如何在ubuntu服务器上部署vapor项目。

    Leacode
  • Akka-Cluster(0)- 分布式应用开发的一些想法

      当我初接触akka-cluster的时候,我有一个梦想,希望能充分利用actor自由分布、独立运行的特性实现某种分布式程序。这种程序的计算任务可以进行人为的...

    用户1150956

扫码关注云+社区

领取腾讯云代金券