JS

/* 事件冒泡 
从最具体的元素接受 然后一级一级的向上传播到最不具体的节点*/
/*事件捕获 
不太具体的节点应该更早的接受到事件 而最具体的节点最后接受到事件*/




/*HTML事件处理程序*/
<!-- 缺点 html代码和js代码紧密的联系在一起  更改比较繁琐 -->
<imput type='button' value='button' id='btn' onclick="alert('hello')"/>


<script>
function showmessage()
{
alert('hello');
}
</script>
<imput type='button' value='button' id='btn' onclick="showmessage()" />
<!-- DEM0级事件处理程序  -->
<!-- 把一个函数赋值给一个事件处理程序的属性 
跨浏览器的优势 简单-->
<input type='button' value='按钮2' id='btn2' >
<script>
var btn2=docunent.getElemrntById('btn2');
btn2.onclick=function()//可以是匿名函数  也可以调用一个函数；
{
alert('这是dom0级处理程序');
}
btn2.onclick=null;//删除事件处理属性，点击按钮不再触发事件
</script>}
<!-- DOM2级事件处理程序 
定义了两个方法     addEventListener()和-removeEventListener()
接受三个参数  要处理的事件名  作为事件处理程序的函数 和布尔值（true 事件捕获falses事件冒泡） 可以添加多个事件 和事件处理程序-->
<input type='button' value='按钮3' id='btn3' >
<script>
var btn3=document.getElemrntById('btn3');
btn3.addEventListener('click',showmessage,false);//添加事件监听程序  去掉事件的on
btn3.removeEventListener('click',showmessage,false);//删除事件
 btn3.addEventListener('click',function(){ alert(this.value)},false);//this可以引用btn3  this.value=按钮3
</script>
<!-- IE事件处理程序 -->
<!-- attachEvent()添加事件 
detachEvent() 删除事件
两个参数   事件处理程序名称和事件处理程序的函数   不适应布尔值的原因  IE8及更早的浏览器只支持事件冒泡-->
<input type='button' value='按钮4' id='btn4' >
<script>
var btn4=document.getElemrntById('btn4');
btn4.attachEvent('onclick',showmessage);//添加事件
btn4.detachEvent('onclick',showmessage);//删除事件
</script>
<!-- 跨浏览器 -->
<script>
var eventUtil={ 
addHandler:fuction(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}else if(element.attachEvent)
{
element.attachEvent('on'+type,handler);
}else {
element['on'+type]=handler;
}
}
removeHandler:{
if(element.removeEventListener)
{
element.removeEventListener(type,handler,false);
}else if(element.detachEvent)
{
element.detachEvent('on'+type,handler);
}else {
element['on'+type]=null;
}
} 
}
eventUtil.addHandler(btn3,'click',showmessage);
eventUtil.removeHandler(btn3,'click',showmessage);
</script>
<!-- 事件对象 -->
<!-- 再触发事件时都会产生一个对象 event -->
<input type='button' value='按钮5' id='btn5' >
<script>
var btn5=document.getElemrntById('btn5');
btn5.onclick=fuction(event){
alert(event.type);//获取事件类型
alert(event.target.nodeName);//获取事件目标
event.stopPropagation();//阻止事件冒泡  
/*事件冒泡   就是你点击input的事件会触发该input所在的DIV包含的事件，该方法可以阻止事件冒泡
<dic>
<input>
</div?




*/
}
</script>
<!-- event.preventDefault()阻止事件的默认行为 -->
<a href='DOM事件.js' id='go'>跳转</a>
<script>
var do=document.getElementById('go').onclick=function(event){
event.preventDefault();
}
</script>
<!-- IE事件对象 event 或者window.event
属性  type  事件类型 
srcElement 获取事件目标
cancelBubble阻止事件冒泡 true  false
returnValue   阻止事件默认行为-->