淘气鬼事件之事件的三种绑定方式

来源：互联网发布：淘宝标志logo 编辑：程序博客网时间：2024/05/18 05:28

以下为三种绑定事件的原代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title>事件的三种绑定</title><style type="text/css">.mod{width: 200px;height: 200px; background-color: blue;}.mod_mod{width: 200px;height: 200px;background-color: green;}</style></head><body><!-- /////////////////////////////////////在dom元素里直接绑定 --> <div class="mod" onclick="alert('你好');"></div> <!-- ///////////////////////////////////////////////在js中代码绑定事件 --> <div class="mod_mod"></div> <script type=""> document.getElementsByClassName("mod")[0].onclick=function(){ alert("你还好么?"); } /////////////////////////////////////////////////////////////用函数中绑定事件，第三个参数false默认为事件冒泡 document.getElementsByClassName('mod_mod')[0].addEventListener('click',hello,false); function hello(){ alert("你知道个锤子哦!"); } ////////////////////////////////////////////////////////在IE旧版本中绑定事件,无法规定是事件冒泡还是捕获 document.getElementsByClassName('mod_mod')[0].attachEvent('click',hello); </script></body></html>

可能小白会说，这个代码我看不清楚能不能细细讲来那么接下来就由我一点一点的道来;

(1)第一种最常见的事件绑定方式，在js代码中的绑定

这种绑定的方式在上述的代码中也有注释，即先获取元素然后绑定onclick事件:document.getElementsByClassName('mod.")[0].onclick实现了事件的绑定;

(2)还有一种懒人事件使用起来也极其的方便

这种绑定的事件实在html的标签中绑定事件，这样就减少了div获取的这个步骤，在dom元素中直接绑定事件，这个代码在上述也有相应的注释的地方;

(3)有些老司机就喜欢欺负新手所以他们创造出了第三种的绑定方式，函数绑定的方式，开个玩笑，其实第三种的绑定方式在主流的浏览器中可以改变事件的冒泡与捕获的方式，关于事件的冒泡与捕获之后会跟进一篇新的博客;那么还是来看这第三种事件的绑定究竟是怎么实现的;

函数形式的事件绑定在主流浏览器中使用addEventListener(event，function，false);这个函数中有三个参数，第一个参数为绑定的事件类型，第二个是绑定事件后实现的函数，打三个参数是一个可选的参数，true为事件的捕获，当为false是事件的冒泡；当不选取第三个参数时，默认的值为false；

而在IE8以及早期的版本中，并不支持该函数，应该使用函数attachEvent(event,function)来绑定事件，然而该函数不支持第三个参数，默认为冒泡事件;

下节会更新事件的冒泡与捕获以及如何解决事件冒泡与捕获带来的不必要的麻烦!

阅读全文

0 0