[小白web前端学习笔记]Javascript事件处理(一)-原创手记-慕课网

     首先祝大家猴年大吉！！雷猴啊~！第一次发表文章，比较紧张哈。目前自己还是个小白，在学习中，看到慕课有活动就兴奋的跑来参加了。
    我自己平时是在电脑上学习，都是边看视频，变动手写代码，并用word文档记录下来知识点，所以不是经常使用到笔记功能，不过有时候在手机上看笔记功能是必须要用到的哈。

好了，直接分享我的学习笔记吧。
Javascript事件处理(一)
一、事件流（即描述的是从页面中接受事件的顺序）
1.IE---事件冒泡流：即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受，然后逐级向上传播至最不具体的那个节点(文档)。
2.Netscape---事件捕获流：不太具体的节点应该更早接受到事件，而最具体的节点最后接收到事件。(大部分浏览器不支持)。

二、事件处理程序
1.1.HTML事件处理程序：直接在HTML里添加事件，调用函数。缺点：HTML和JS代码紧密的耦合在一起，修改的时候HTML和JS都需要修改。
2.DOM0级事件处理程序：比较传统的方式，把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，具有简单和跨浏览器的优势，没有HTML事件处理程序的缺点。
使用方法：先将元素取出，在对该元素进行事件添加。
例：

<input type=“button” value=“按钮” id=“btn”>
<script>
    var btn=document.getElementById(‘btn’) ;//先取元素；
    btn.onclick=function(参数){执行函数};//此为DOM0级绑定（添加）事件属性；
    btn.onclick=null;//定义该事件为空，即解绑（删除）该事件属性；
</script>

3.DOM2级事件处理程序：定义了两个方法：用于处理指定和删除事件处理程序的操作，分别是addEventListener()和removeEventListener()。
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。
例：

<input type=”btton ”value=”按钮 ” id=”btn ”>
 <script>
     function showMes(){
     alert(‘hello world! ’)
  }
    var btn=document.getElementById(‘btn’); //取出元素；
    btn.addEventListener(‘click’，shoeMes，false);//DOM2级添加事件；
    btn.addEventListener(‘click’，function(){alert(this.value);}，false);//一个按钮也可添加多个事件处理程序，同样DOM0级也可以，这也是DOM0和DOM2区别于HTML的一点；
btn.removeEventListener(‘click’, showMes , false);//DOM2级删除事件；
</script>

           *注：DOM2事件中要处理的事件名不加前不加“on”。另外，DOM0级和DOM2级具有一些HTML事件处理程序没有的优势，如DOM0级和DOM2级拥有一个元素可以添加多个事件或事件处理程序HTML则没有。*

4.IE事件处理程序
添加事件attachEvent()
删除事件detachEvent()
都接受相同的两个参数：事件处理程序的名称和事件处理程序的函数。

例：<input type=”btton ”value=”按钮 ” id=”btn ”>
<script>
function showMes(){
alert(‘hello world! ’)
}
var btn=document.getElementById(‘btn’); //取出元素；
btn.attachEvent(‘onclick ’, showMes);//添加事件；
btn.detachEvent(‘onclick ’, showMes);//删除事件；
</script>

5.跨浏览器的事件处理程序（采用“能力检测”方法）

<input type=”btton ”value=”按钮 ” id=”btn ”>
<script>
function showMes(){
alert(‘hello world! ’)
}
//将方法封装在一个对象内
var eventUtil={
//添加句柄
addHandler:function(element , type , handler){
if ( element.addEventListener ){
element.addEventListener( type , handler , flase );//DOM2级判断;
}else if ( element.attachEvent ){
element.attachEvent( ‘on’+ type , handler );//IE事件处理程序判断；
}else{
element[‘on’+ type ];//DOM0级判断；
注：element.onclick ==element.[‘onclick’]
}
}
}
//调用对象、方法
eventUtil.addHandler( btn , ‘click’, showMes );
</script>

今天就写到这里，明天继续，欢迎大家留言指点哦，排版不合适或者内容有错误的地方请告诉我哦，谢谢大家。^_^