JS学习笔记（一）DOM事件和监听

标签：

将事件绑定到元素身上的三种方法：

　　1、HTML事件处理程序（不推荐使用）

1 <a onclick="hide()">

　　2、传统的DOM事件处理程序

　　即在目标DOM事件的基础上绑定事件。如果在声明函数时加上括号，函数会立即调用，去掉括号，函数不会立即调用。

1  function change(){
2      //code
3 }
4 var name = document.getElementById("name");
5 name.onclick = change;   //

　　3、设置事件监听器。

　　即为addEventListener()函数，该函数有三个参数，第一个参数指定事件名称，第二个参数是发生事件时要调用的函数，第三个参数是指定事件响应的方式，为布尔值。当第三参数为true时为冒泡方式，当参数为false时为捕获方式。

1 element.addEventListener(‘event‘,functionName,Boolean);

 　　因为在注册事件处理程序和事件监听器时，在函数名的后面是没有小括号的，因此需要采用其他的手段来传递参数。

　　如果需要向事件处理程序或事件监听器所调用的函数传递参数，就需要把方法调用封装在匿名函数中。

1 el.addEventListener(‘event‘,function(){
2    changename(5); 
3 },false);

 　　说到这里，就很要必要解释一下事件流以及什么是事件冒泡、事件捕获了。

　　事件流：描述从页面中接受事件的顺序。

　　HTML元素都位于另一些元素中。当一个元素发生某个事件时，它的父元素同样会发生该事件。

　　当代码在一个元素和其祖先元素或者后代元素上都有事件处理程序时，事件流就会变得很重要。

　　事件冒泡：指的是事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流的默认类型，被绝大多是浏览器支持。

　　事件捕获：指的是事件从最宽泛的节点开始向内传播到最具体的节点。这种方式在IE8和更早版本的IE中不被支持。

　　支持旧版本的事件监听器

　　IE5~IE8中不支持addEventListener()方法。但支持attachEvent()方法，让事件监听器在旧版本的IE浏览器中同样能运行。

　　使用事件监听器之前，应检测addEventListener()方法能否使用，不能使用则选择attachEvent()方法。

 1 el = document.getElementById(‘mybutton‘);
 2 if(el.addEventListener)
 3 {
 4     el.addEventListener(‘blur‘,function(){
 5         checkUsername(5);
 6     },false);
 7 }else{
 8     el.attachEvent(‘onblur‘,function(){
 9         checkUsername(5);
10     });
11 }

　　要注意的是attachEvent()方法中，事件的名称前面应该加上on，

 　　事件冒泡过程是可以被阻止的，是为了防止事件冒泡带来错误。阻止事件冒泡就是使用stopPropagation()方法。

1 event.stopPropagation();

　　其中event指的是事件对象。

JS学习笔记（一）DOM事件和监听

标签：

原文地址：http://www.cnblogs.com/suvllian/p/5461509.html