JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点
复合事件
复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列。
compositionstart
、compositionupdate
、compositionend
复合事件有以下三中:
compositionstart:要开始输入;
compositionupdate:插入新字符;
compositionend:复合系统关闭,返回正常键盘输入状态;
event.data
data属性:
compositionstart访问data:正在编辑的文本;
compositionupdate访问data:正插入的新字符;
compositionend访问data:插入的所有字符;
如:
<input type="text" id="name">
<input type="text" id="value" value="">
js:
var inputName = document.getElementById("name");
var value = document.getElementById("value");
// inputName.addEventListener("compositionstart", function () {
// inputName.style.backgroundColor = "red";
// value.value = event.data;
// });
inputName.addEventListener("compositionupdate", function () {inputName.style.backgroundColor = "yellow"; //开始编辑,背景变成黄色value.value = event.data; //第二个textbox显示正在编辑的字符
});
inputName.addEventListener("compositionend", function () {inputName.style.backgroundColor = "white"; //编辑完毕,背景变成白色value.value = event.data; //第二个textbox显示输入的最终字符
});
变动事件(貌似作废了很多变动事件,跨浏览器不好,不建议用)
变动事件,能在DOM中的某一部分发生变化时给出提示。
主要有:
DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中时;
DOMNodeRemoved:在节点从其父节点中被移除时;
DOMNodeInsertedIntoDocument:在一个节点被直接插入文档,或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发;
DOMNodeRemovedFromDocument:在一个节点被直接从文档中移除,或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发;
DOMSubtreeModified:在DOM结构中发生任何变化时触发;
DOMAttrModified:在特性被修改之后触发;
DOMCharacterDataModified:在文本节点的值发声变化时触发;
删除节点DOMNodeRemoved
事件
当使用removeChild()或replaceChild()从DOM中删除节点,首先触发DOMNodeRemoved
事件(event.target是被删除的节点,event.relatedNode属性包含对目标节点父节点的引用,在这个事件触发时,节点尚未从父节点中删除,因此其parentNode属性与event.relatedNode相同),这个事件会冒泡;其次继而触发DOMNodeRemovedFromDocument
事件(event.target是被移除的节点,除此之外没有别的信息在event对象中),这个事件不回冒泡;最后触发DOMSubtreeModified
事件(event.target是被移除的节点的父节点,除此之外没有别的信息在event对象中)。
如:
<ul id="list"><li>list item1</li><li>list item2</li><li>list item3</li>
</ul>
js:
var list = document.querySelector("#list");
//为每一个li添加一个新事件,点击后被移除;
for (var i = 0, len = list.getElementsByTagName("li").length; i < len; i++) {list.getElementsByTagName("li")[i].addEventListener("click", function() {this.parentNode.removeChild(this);});
};
//为list添加一个新事件,当检测到DOM变动的时候,改变css值
list.addEventListener("DOMNodeRemoved", function() {var style = event.relatedNode.style;style.border = "1px solid gray";var x = setTimeout(function () {style.border = "1px solid white";}, 1000);
});
又如:
var list = document.querySelector("#list");
var item = list.getElementsByTagName("li");
//为每一个li添加一个新事件,点击后被移除;
for (var i = 0; i < item.length; i++) {item[i].addEventListener("click", function() {this.parentNode.removeChild(this);});item[i].addEventListener("DOMNodeRemoved", function() { //DOMNodeRemoved事件console.log(event.target.tagName + " going to be removed"); //LI going to be removed 目标是li});};
// list.addEventListener("DOMRemovedFromDocument", function() {
// console.log("removed");
// });
list.addEventListener("DOMSubtreeModified", function() {console.log(event.target.tagName + " modified"); //UL modified 目标是Ul
})
插入节点DOMNodeInserted
事件
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先会触发DOMNodeInserted
事件(event.target是被插入的节点,event.relatedNode是包含一个对父节点的引用,触发这个事件时,节点已经被插入到了新的父节点中),该事件冒泡;然后触发DOMNodeInsertedIntoDocument
事件,这个事件不冒泡,因此必须在插入节点之前为它添加这个事件处理程序。最后一个触发的事件是DOMSubtreeModified
,触发于新插入节点的父节点。
下面是一个todoList:
style部分:
<style>
*{margin:0;padding:0;font-family: monospace;
}
body{background-color:#ccc;
}
#info{color:white;width:100%;height:1em;padding:0.3em;position:absolute;top:-1.6em;
}
li{background-color:white;margin-top:2em;padding:1em;width:80%;box-shadow: 2px 2px 2px gray;max-height:20em;list-style-type:none;margin-left:auto;margin-right:auto;overflow:scroll;
}
#btn{margin-top:2em;
}
</style>
dom部分:
<div id="info"><p class="note">infomation</p>
</div>
<input type="button" value="new item" id="btn">
<ul id="list">
</ul>
js部分:
<script type="text/javascript">
//设置变量
var list = document.querySelector("#list");
var item = list.getElementsByTagName("li");
var btn = document.getElementById("btn");
var info = document.querySelector("#info");
var note = document.querySelector("#info").querySelector(".note");
//添加新的任务
btn.onclick = function() {//输入新的任务字符串var newItemValue = prompt("输入新的任务");if (newItemValue == null || newItemValue == "") {return false;}// 创建新任务列表var newLi = document.createElement("li");newLi.appendChild(document.createTextNode(newItemValue))list.appendChild(newLi);//为添加的新任务赋予删除功能newLi.addEventListener("dblclick", function() {this.parentNode.removeChild(this);});//为添加的新任务赋予删除提醒功能newLi.addEventListener("DOMNodeRemoved", function() { //DOMNodeRemoved事件message("orangered",1.6,"已删除");});
};
//当list添加新任务时,发出提醒
list.addEventListener("DOMNodeInserted", function() {message("skyblue",1.6,"新建成功");
});
// 当Ul DOM改变时,发出提醒
list.addEventListener("DOMSubtreeModified", function() {console.log("updated"); //UL modified 目标是Ul
})
//消息提醒
function message (color,top,infomation) {note.firstChild.nodeValue = infomation;info.style.backgroundColor = color;var showing = setTimeout(function () {info.style.top = "0em";var hiding = setTimeout(function () {info.style.top = -top + "em";}, 3000);}, 0);
}
</script>
JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点相关推荐
- 如何在 Windows XP 的事件查看器中查看和管理事件日志
事件查看器 在 Windows XP 中,事件是在系统或程序中发生的.要求通知用户的任何重要事情,或者是添加到日志中的项.事件日志服务在事件查看器中记录应用程序.安全和系统事件.通过 使用事件查看器中 ...
- android root点击事件,在Android中使用InputManagerService进行事件传递
在Android中使用InputManagerService进行事件传递 发布时间:2020-11-25 16:47:31 来源:亿速云 阅读:67 作者:Leah 在Android中使用InputM ...
- 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
- VS中的预先生成事件和后期生成事件
VS中的预先生成事件和后期生成事件 原文:VS中的预先生成事件和后期生成事件 在C#开发中,有时候需要在程序编译之前或之后做一些操作. 要达到这个目的,可以使用Visual Studio中的预先生成事 ...
- 调用某个按钮事件_高级UI晋升之触摸事件分发机制(一)
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 0. 前言 鉴于安卓分发机制较为复杂,故分为多个层次进行讲解,分别为基础篇.实践 ...
- 2020.11.18第十三章 事件(事件处理程序;事件对象;事件类型:UI事件;焦点事件;鼠标与键盘事件 变动事件 模拟事件)
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序 可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...
- $.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
- JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理 什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
- 读《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
最新文章
- Mybatis执行过程源码分析
- Linux 下如何安装软件?
- VREP中的力触觉设备接口(CHAI3D)
- WebAPIs移动端特效——不看你就亏大了
- php面试题2018
- xhr get获取文件流下载文件_python爬虫实战——豆瓣电影get初体验
- java高分面试指南:redis怎么保证高可用
- 使用 Django + Wusgi + Nginx 部署 Django
- [转]wchar_t char std::string std::wstring CString 转换
- MySQL : mysql连接报 Communications link failure
- django python3 异步_详解配置Django的Celery异步之路踩坑
- IEEE Access模板caption无法换行
- linux终端怎么设置monaco,ubuntu16.04安装monaco字体
- Afc2add与AppSync
- 圆柱壳matlab,[matlab遗传算法工具箱论文]基于遗传算法和BP神经网络的圆柱壳大...
- php扩展 zval_copy_ctor,Zend API:pval/zval 数据结构
- 传智播客风清扬视频-------IO简述之字符流常用实现类
- check the manual that corresponds to your MySQL server version for the right
- 选一个适合自己的加密芯片,加密IC,如何才能真正的做到不被破解。
- UERANSIM的使用
热门文章
- idea网页预览功能_IDEA 2020.2 重磅发布,动画级新功能预览!
- iPhone拍人像,人头直接不见了,什么情况?
- MIT:睡眠不足会让你连路都走不好,但补觉还有救
- 谷歌最新黑科技:裸眼3D视频通话,宛如真人面对面!Jeff Dean:魔镜啊魔镜
- 最新安卓系统细节曝光:后盖手势控制、浮雕式UI、隐私保护.....本月更新!
- 倒计时两天丨NeurIPS 2020预讲会:7位智源青年科学家,21场报告
- 速度×6,模型缩小20倍:用华为华科的TinyBERT做搜索,性能达BERT 90%
- ansible的模块使用
- 深度学习专家Karpathy加入特斯拉,或将负责自动驾驶视觉研究
- 动态rem与1px边框问题的理解