DOM笔记
事件委托
利用事件冒泡机制,委托事件给父级元素,比监听每个子元素的事件性能好。
html
<div style="height: 100px;">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
js
function foo(e) {
if (e.target.nodeName.toLowerCase() === 'li') {
e.target.style.background = '#000';
}
}
document.querySelector('div').addEventListener('click', foo)
监听div内容修改
1.DOM2级中的mutation(变动事件)里的 DOMSubtreeModified 可以监听div内容修改
document.querySelector('.element').addEventListener('DOMSubtreeModified', function(){
alert(this);
});
2.MutationObserver构造函数可以监听div内容修改
//兼容性
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var node = document.getElementById('node'); //配置信息
var config = {
subtree: true, //监听目标节点包括后代节点
childList: true, //监听目标节点的子节点是否增加或者移除
attributes: true, //监听目标节点的attributes属性的增删改
characterData: true //如果监听的目标节点是文本节点,同时监听节点的文本内容
} //回调函数
var func = function(re) {
alert("success");
console.log(re);
} //生成实例
var server = new MutationObserver(func); //调用配置信息和回调函数
server.observe(node, config);
事件监听会传入一个event对象。
1.当事件绑定在触发的元素上,触发元素时,event.currentTarget 和 event.target 和 this 都指向这个元素。
例:
var btn = document.getElementById("nowBtn");
btn.onclick = function(e) {
console.log(e.currentTarget === this); //true
console.log(e.target === this); //true
}
如果绑定在当前元素的父级元素,触发元素时,event.currentTarget 和 this 都指向这个父级元素。 event.target 则指向触发的元素。
例:
document.body.onclick = function(e) {
console.log(event.currentTarget === document.body); //true
console.log(this === document.body); //true
console.log(event.target === document.getElementById("nowBtn")); //true
}
2.需要绑定多个事件时,可以利用event.type属性
var btn = document.getElementById('myBtn');
var handler = function(e) {
switch(e.type) {
case "click":
console.log("click");
break;
case "mouseover":
event.target.style.backgroundColor = "#333";
break;
case "mouseout":
event.target.style.backgroundColor = "#000";
break;
}
}
btn.onclick = handler;
btn.addEventListener("mouseover",handler);
btn.onmouseover = handler;
3.event.preventDefault()可以阻止元素的默认行为。
如<a>元素默认行为是导航到href的URL,用事件处理就可以取消它(需要event.cancelable为true,默认为true)。
var link = document.getElementById('myLink');
link.onclick = function(e) {
e.preventDefault();
};
4.event.stopPropagation()用来阻止捕获及冒泡。
var btn = document.getElementById('myBtn');
btn.onclick = function(e) {
console.log("click");
event.stopPropagation(); //执行完后阻止冒泡到body的click事件
}; document.body.onclick = function(e) {
console.log('body click');
};
keyCode可以直接转换成大写字母和数字
回车等特殊键无法转换,符号转换错误。
var key;
document.getElementById('element').addEventListener('keydown', function(e){
key = e.keyCode;
})
key = String.fromCharCode(key);
HTML5事件
1.监听contextmenu事件用preventDefault()方法阻止冒泡后,可以阻止右键弹出的上下文菜单。这个事件是冒泡事件,监听document可以阻止所有元素的contextmenu事件。
2. haschange事件可以监听URL参数变化(主要用于Ajax),这个事件只能添加给window对象。此时的 event 会多出 oldURL 和 newURL,例:
window.addEventListener('haschange',function(e){
console.log(e.oldURL);
console.log(e.newURL);
})
DOM笔记的更多相关文章
- DOM笔记(十):JavaScript正则表达式
一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...
- DOM笔记(七):开发JQuery插件
在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...
- DOM笔记(五):JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- DOM笔记(四):HTML 5 DOM复杂数据类型
HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...
- DOM笔记(三):Element接口和HTMLElement接口
一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...
- DOM笔记(二):Node接口
所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...
- DOM笔记(一):HTMLDocument接口
操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...
- DOM笔记(十):JavaScript正則表達式
一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...
- DOM笔记(十三):JavaScript的继承方式
在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...
- DOM笔记(十二):又谈原型对象
因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prot ...
随机推荐
- svn 架设
1.yum install subversion openssl-devel -y 2. cd /data/svn 3. svnadmin create remote 4. 编辑conf 下 aut ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- js判断手机 横屏模式
js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...
- 初识Redis(1)
Redis 是一款依据BSD开源协议发行的高性能Key-Value存储系统(cache and store). 它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希( ...
- Dapper
前一段做一个技术分享关于dapper的,现在再总结一下,也好长时间没有更新博客了--,用到的东西 Dapper.AutoFac .AutoMapper.FluentValidation: 下面说一下D ...
- WebForm 内置对象2
Session: 与Cookies相比 相同点:每一台电脑访问服务器,都会是独立的一套session,key值都一样,但是内容都是不一样的 以上所有内容,都跟cookies一样 不同点: 1.Sess ...
- Android 偶遇小问题解决方案集合
1.Android 如何让EditText不自动获取焦点 解决方案:找一个EditText的父级控件把EditText默认的行为截断了!设置 android:focusable="true& ...
- C# MD5摘要算法、哈希算法
MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法) MD5算法具有以下特点: 1.压缩 ...
- Linux 挂载U盘
命令模式下挂载,图形的一般可以自动识别. #fdisk -l --查看linux 硬盘分区 这个/dev/sdg1 就是我的U盘了,这里挂载的fat格式的 # mount /dev/sdg1 ...
- Kolmogorov-Smirnov检验
Kolmogorov-Smirnov检验(K-S检验)基于累积分布函数,用以检验一个经验分布是否符合某种理论分布或比较两个经验分布是否有显著性差异. 两样本K-S检验由于对两样本的经验分布函数的位置和 ...