#事件流
事件捕获:由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()方法