Web前端从入门到放弃（js事件的绑定）

来源：互联网发布：林书豪2016数据编辑：程序博客网时间：2024/04/30 09:55

js事件的绑定

为什么要用事件绑定？原因：
例如：当页面写了两个弹窗，但结果在页面只弹出最后一个，如果要让两个弹窗都弹出来就得用到事件的绑定。

在JavaScript中事件绑定使用 attachEvent，但是这是IE浏览器使用的，而谷歌和火狐以及其它浏览器不支持，他们使用 addEventListener。

IE方式的事件绑定
lattachEvent(事件名称, 函数)，绑定事件处理函数
ldetachEvent(事件名称, 函数)，解除绑定

<script type="text/javascript">window.onload=function () {var obtn=document.getElementById('btn');obtn.attachEvent('onclick',function () {alert('a');});obtn.attachEvent('onclick',function () {alert('b');});}</script>

lDOM方式的事件的绑定
laddEventListener(事件名称,函数, 捕获)
lremoveEventListener(事件名称, 函数, 捕获)

<script type="text/javascript">window.onload=function () {obtn.addEventListener('click',function () {alert('a');},false)obtn.addEventListener('click',function () {alert('b');},false)}</script>

实现浏览器兼容的方法最常用的的就是 if 条件句判断了。那么搞清楚这两个方法的使用方法就不难了写出JavaScript代码了。

<script>window.onload=function (){var oBtn=document.getElementById('btn1');if(oBtn.attachEvent){oBtn.attachEvent('onclick', function (){alert('a');});oBtn.attachEvent('onclick', function (){alert('b');});}else{oBtn.addEventListener('click', function (){alert('a');}, false);oBtn.addEventListener('click', function (){alert('b');}, false);}};</script>

因为这是比较常见的，我们可以把它封装成函数方便以后调用

<script>function myAddEvent(obj, ev, fn){if(obj.attachEvent){obj.attachEvent('on'+ev, fn);}else{obj.addEventListener(ev, fn, false);}}window.onload=function (){var oBtn=document.getElementById('btn1');myAddEvent(oBtn, 'click', function (){alert('a');});myAddEvent(oBtn, 'click', function (){alert('b');});};</script>

完美

1 0