首页 > 代码库 > DOM事件第二弹（UIEvent事件）

DOM事件第二弹（UIEvent事件）

2024-09-24 00:39:32   234人阅读

此文章主要总结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="http://www.mamicode.com/1" >1</option>    <option value="http://www.mamicode.com/2" >2</option>    <option value="http://www.mamicode.com/3" >3</option>    <option value="http://www.mamicode.com/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);});

技术分享

五、复合事件

事件名说明
compositionstartime输入开始
compositionupdateime接受输入框值改变
compositionendime输入结束

说明：

  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);

DOM事件第二弹（UIEvent事件）


联系
我们