DOM 事件
【摘要】 1. DOM事件级别 1.1. DOM0<button id="btn" type="button"></button><script> var btn = document.getElementById('btn'); //添加事件 btn.onclick = function() { console.log(this.id)); //这里的thi...
1. DOM事件级别
1.1. DOM0
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
//添加事件
btn.onclick = function() {
console.log(this.id));
//这里的this代表DOM对象
}
//清理dom0 事件时，只需给该事件赋值为 null
input.onclick = null
</script>
特点：
- DOM0级事件无法给一个事件添加多个处理函数
1.2. DOM2
var dom = document.getElementById("id");
dom.addEventListener('click', a, false);
function a()
{
alert(this.id);//id
// this代表的是dom对象
}
//移除事件
//传入的三个参数与添加事件完全相同。
dom.removeEventListener(('click', a, false)).
参数说明：
- 第一个参数是事件名，就是事件属性去掉on，
- 第二个参数是事件处理函数，
- 第三个参数是是否在事件捕获阶段执行。
特点
- 同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡。
var dom = document.getElementById("outestA");
dom.addEventListener('click', a, false);
dom.addEventListener('click', a, true);
function a()
{
alert(this.id);//outestA
}
- 如果绑定的是同一个事件处理函数，并且都是事件冒泡类型或者事件捕获类型，那么只能绑定一次，多次绑定仅调用一次。
- 可以绑定多个不同的事件处理函数
旧版本IE浏览器（IE8及一下）
需要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获所以没有第三个参数。
var dom = document.getElementById("id");
dom.attachEvent('onclick',a);
function a()
{
alert(this.id);/**/undefined**
// 这里的this是window对象
}
1.3. Dom3
DOM3级事件就是在DOM2基础上增加了更多的事件类型
- UI事件，当用户与页面上的元素交互时触发，如：load、scroll
- 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 文本事件，当在文档中输入文本时触发，如：textInput
- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
- 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
注:DOM1标准中并没有定义事件相关的内容*
2. DOM事件模型
- 事件冒泡
- 事件捕获
3. DOM事件流
有以下HTML结构
<html>
<body>
<div>
<span>
我是目标内容
</span>
</div>
</body>
</html>
事件捕获：window -> document -> html -> body -> div -> span -> 目标
事件冒泡：目标 -> span -> div -> body -> html -> document -> window
3.1 冒泡实例：
<div id="parent" class="parent">
<div id="child" class="child">
this is child
</div>
</div>
(function(){
var child = document.getElementById('child');
child.addEventListener('click', function(click){
console.log('child');
} ,flase);//false或者不写，都是冒泡。
var parent = document.getElementById('parent');
parent.addEventListener('click', function(click){
console.log('parent');
} ,false);
}());
出现的情况：
- 点击child元素，先打印child后打印parent；
- 点击parent元素，只打印parent。
3.1 捕获实例：
<div id="parent" class="parent">
<div id="child" class="child">
this is child
</div>
</div>
(function(){
var child = document.getElementById('child');
child.addEventListener('click', function(click){
console.log('child');
} ,true);
var parent = document.getElementById('parent');
parent.addEventListener('click', function(click){
console.log('parent');
} ,true);
}());
出现的情况：
- 点击child元素，先打印parent后打印child。
- 点击parent元素，只打印parent。
注：事件默认的处理阶段为冒泡阶段，可以把addEventListener第三个参数设置为true来让时间在捕获阶段被处理，
4. event对象
事件处理函数会回调一个参数event，代表当前事件对象。
event中常用的方法和属性：
- preventDefault 阻止默认行为，比如当点击submit按钮时候，可以采用此方法阻止表单提交。
- stopPropagation 停止事件冒泡，需要防止事件冒泡带来的负面影响的时候就要使用该方法。
- stopImmediatePropagation 阻止后续事件，该方法除了阻止事件冒泡外在当前事件被绑定多个处理程序的时候，后续的处理程序也会被阻止。
- currentTarget 此属性返回当前事件所绑定的对象。
- target 此属性返回当前触发事件的对象，注意target是触发事件的对象，是真正的事件源，同样以上面的HTML为例，给div绑定一个事件，点击带文字的span后，target是span，而currentTarget是div。
应用：事件冒泡和target属性能做很多事情，比如事件委托
<ul id="click">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
如果想要实现点击每个li标签就能打印出文本内容，我们可以不用给每个li绑定事件，只需要利用事件冒泡即可
var click = document.getElementById('click');
click.addEventListener('click', log, false);
function log(e) {
console.log(e.target.innerText);
}
5. 自定义事件
除了系统内置的事件外，我们还可以自定义事件，由于平时使用的不多可能感觉会很高端，其实自定义事件并不复杂
var myEvent = new Event('myEvent');
document.addEventListener('myEvent', log, false);
function log() {
console.log('hello event');
}
document.dispatchEvent(myEvent);
通过创建Event对象来创建事件，通过dispatchEvent函数派发事件。自定义事件可以绑定到任意DOM元素上，此处选择document只是为了演示方便。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）