DOM事件探秘
Posted 殷的博客-Exploration
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM事件探秘相关的知识，希望对你有一定的参考价值。
#事件流
事件捕获：由document向事件触发的元素捕获
事件冒泡：由触发事件的元素向上级触发
#事件处理程序
html事件处理程序
<input type="button" value="按钮" onclick="alert(‘hello world‘)"></input>
或者
<script type="text/javascript"> function showMes(){ alert(‘hello world‘); } </script> <body> <input type="button" value="按钮" onclick="showMes()"></input> </body>
DOM0级事件处理程序
<script type="text/javascript"> document.getElementById(‘btn‘).onclick=function(){ alert(‘hello world‘); } </script> <body> <input type="button" value="按钮" id="btn"></input> </body>
#DOM2级事件处理程序
定义了两个方法：
addEventListener()添加事件
removeEventListener()移除事件
三个参数设置;事件名称，处理方法(函数)，布尔值-----冒泡（false）或捕获（true）
btn3.addEventListener(‘click‘,showMes,false);
注意：
1、若事件名称有on，则需去掉on。onclick -----> click，onmouseover -----> mouseover等等；
2、false 兼容所有浏览器-----事件冒泡流
3.通过addEventListener添加的事件只能通过removeEventListener来删除。---参数要一样
btn.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致，删除事件
4：dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。
btn3.addEventListener(‘click‘,showMes,false);
btn3.addEventListener(‘click‘,showMes,function(){alert(this.value）;},false);
特别的：1.DOM 2级事件处理程序无法删除匿名函数，只有将匿名函数命名化或赋值化才可以删除
2.IE不支持该事件
<input type="button" value="按钮" id="btn"></input> <script type="text/javascript"> function Mes() { alert(‘hello world‘); } var btn = document.getElementById(‘btn‘); btn.addEventListener(‘click‘, Mes, false); btn.addEventListener(‘mouseover‘,function(){ alert(this.type); },false); </script>
#什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象EVENT
①DOM中的事件对象 属性
（1）、type属性用于获取事件类型
（2）、target属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为
如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法
以上是关于DOM事件探秘的主要内容，如果未能解决你的问题，请参考以下文章