DOM事件代码小结
以下代码出自《DOM Enlightenment》一书
1.三种事件形式
<body onclick="alert('触发内联属性事件')">
<div>click me</div>
</body>
<script>
var div = document.querySelector('div');
div.onclick = function() {
alert("触发属性事件");
};
div.addEventListener('click', function() {
alert('触发addEventListener');
}, false);
</script>
2.事件流程
先捕获后冒泡
捕获：从树主干到分支
冒泡：从树分支到主干
<html>
<body>
<div>click me to start event flow</div>
</body>
</html>
<script>
// 捕获阶段 window
window.addEventListener('click', function() {
alert(1);
}, true); // 捕获阶段 document
document.addEventListener('click', function() {
alert(2);
}, true); // 捕获阶段 html
document.documentElement.addEventListener('click', function() {
alert(3);
}, true); // 捕获阶段 body
document.body.addEventListener('click', function() {
alert(4);
}, true); // 捕获阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(5);
}, true); // 冒泡阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(6);
}, false); // 冒泡阶段 body
document.body.addEventListener('click', function() {
alert(7);
}, false); // 冒泡阶段 html
document.documentElement.addEventListener('click', function() {
alert(8);
}, false); // 冒泡阶段 document
document.addEventListener('click', function() {
alert(9);
}, false); // 冒泡阶段 window
window.addEventListener('click', function() {
alert(10);
}, false); </script>
3.移除事件
<body>
<div>click to say hi</div>
</body>
<script>
var sayHi = function() {
alert('hi');
};
document.querySelector('div').addEventListener('click', sayHi, false); document.querySelector('div').removeEventListener('click', sayHi); document.body.addEventListener('click', function() {
alert('hello');
}, false); // 不是同一个回调，是不起作用的
document.body.removeEventListener('click', function() {
alert('hello');
});
</script>
4.事件状态对象
<body>
<div>click me</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(event) {
console.dir(event);
}, false); window.addEventListener('load', function(event) {
console.dir(event);
}, false);
</script>
5.监听函数this指向
this指向绑定事件的节点，即event.currentTarget属性
<body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(this);
alert(this == event.currentTarget)
});
</script>
6.获取事件触发元素（事件源头）
<body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(event.target);
});
</script>
7.阻止默认事件
<body>
<a href="http://www.baid.com">链接</a>
<input type="checkbox"/>
<textarea></textarea>
</body>
<script> // 点击链接时，阻止跳转
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
}); // 点击复选框时，阻止选中
document.querySelector('input').addEventListener('click', function(e) {
e.preventDefault();
}); // 在文本框中尝试输入字符时，阻止输入（使用输入法时，不一定会触发keypress事件）
document.querySelector('textarea').addEventListener('keypress', function(event) {
event.preventDefault();
});
</script>
8.阻止事件冒泡
<body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert('div');
e.stopPropagation();
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>
9.阻止冒泡和其他相同事件监听器
<body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert(1);
});
document.querySelector('div').addEventListener('click', function(e) {
alert(2);
e.stopImmediatePropagation();
});
document.querySelector('div').addEventListener('click', function(e) {
alert(3);
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>
10.自定义事件
<body>
<div>click</div>
</body>
<script>
var customEvent = document.createEvent('CustomEvent');
// 参数是：name,bubble,cancelable,detail
customEvent.initCustomEvent('hello', true, false,{
msg: 'hello'
});
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
this.dispatchEvent(customEvent);
})
div.addEventListener('hello', function(e) {
alert(e.detail.msg);
})
</script>
11.模拟鼠标点击事件
<body>
<div>自动触发</div>
</body>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
}) var autoClick = document.createEvent('MouseEvent');
// 参数是: name,bubble,cancelable,view,detail,screenx,screeny,clientx,clienty,ctrlkey,altkey,shiftkey,metakey,button,relatedTarget
autoClick.initMouseEvent('click', true, true, document.defaultView,0,0,0,0,0,false,false,false,0,null,null);
div.dispatchEvent(autoClick);
</script>
12.事件委托
<p>点击某个单元格</p>
<table border="1">
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
</tr>
<tr>
<td>row 4 col 1</td>
<td>row 4 col 2</td>
</tr>
</table>
<script>
document.querySelector('table').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() == 'td') {
alert(event.target.textContent);
}
});
DOM事件代码小结的更多相关文章
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出（一）
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么？
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- DOM事件简介－－摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序. 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户 ...
随机推荐
- Java中设计模式之工厂模式-4
一.工厂模式由来 1)还没有工厂时代:假如还没有工业革命,如果一个客户要一款宝马车,一般的做法是客户去创建一款宝马车,然后拿来用. 2)简单工厂模式:后来出现工业革命.用户不用去创建宝马车.因为客户有 ...
- 织梦CMS去广告方法 for DedeCMS V5.7
DedeCms 5.7新版发布,下来上传至服务器安装完毕,点击进入后台登陆界面,怎么多了广告链,而且登陆界面也变了,以前可不带这样的啊.按步骤一步一步来去版权再去广告吧. 一,去处后台登陆页login ...
- ue4打包问题的巧妙解决——二分回退大法！
昨天突然发生了一件非常恐怖的事--我的ue4项目居然不能打包了!! 大概是这么一回事: UATHelper: 打包 (Windows (64位)): UnrealBuildTool: ERROR: ...
- ocr智能图文识别 tess4j 图文，验证码识别 分享及所遇到的问题
自己对tess4j的使用总结 1,tess4j 封装了 tesseract-ocr 的操作 可以用很简洁的几行代码就实现原本tesseract-ocr 复杂的实现逻辑 如果你也想了解tesseract ...
- LANMP一键安装包 版本服务任你选 可安装单一服务
介绍与使用 更多内容请到 乌龟运维 wuguiyunwei.com 请保证在系统原有yum源文件存在的情况下运行此脚本 以下以centos7.3为例: 下面以安装LNMP为例: ? 1 wget ht ...
- Step by Step 用Azure Automation 来开虚机（ARM）
使用Azure Automation来自动化处理各种重复的耗时的云管理任务从而帮助云运维人员提升效率,帮助降低运营成本. 具体相关的介绍以及怎样利用Azure Automation来完成定期开关虚拟机 ...
- android下的名词/片段解释
关于建项目时候SDK解释 minimum required SDK: 又为miniSdk, 是你程序最低支持的SDK版本,这个现在一般miniSDK设定一般为8或者10 Target SDK:是你程序 ...
- 【DG】[三思笔记]一步一步学DataGuard
[DG][三思笔记]一步一步学DataGuard 它有无数个名字,有人叫它dg,有人叫它数据卫士,有人叫它data guard,在oracle的各项特性中它有着举足轻理的地位,它就是(掌声)..... ...
- Jenkins构建本地项目到服务器上自动部署的方法
博主原创,转载请注明. 最近在用Jenkins做项目的自动部署,由于项目需求,现在要在本地构建后再放到Tomcat里.以下是本地构建步骤: 名称填写好,下面的选项是可选的. 源码管理这里选择none. ...
- thinkphp之获取客户端IP地址
/** * 获取客户端IP地址 * @param integer $type 返回类型 0 返回IP地址 1 返回IPV4地址数字 * @return mixed */ function get_cl ...