真正的了解事件绑定

最新推荐文章于 2022-07-15 15:56:00 发布

瞧我的记性又把你当人看了

最新推荐文章于 2022-07-15 15:56:00 发布

阅读量336

点赞数

分类专栏： JS基础分享文章标签：函数

本文链接：https://blog.csdn.net/a976196371/article/details/52799943

版权

JS基础分享专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、事件绑定
想了解什么是事件绑定前，我先写个小例子看一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                alert('a');
            }
            window.onload=function(){
                alert('b');
            }
        </script>
    </head>
    <body>
    </body>
</html>

当有两个window.onload同时存在的时候，在页面中弹出的只是最后一个b。也就是说起作用的其实就是最后一个。
当然了有人会说那就都写一个window.onload里啊。但是我们应该考虑到在实际项目中，我们都是分工合作的，每个人都有自己的window.onload。那我们又想让这几个window.onload都起作用时，我们就用到了事件绑定。
下面我就举例说明事件绑定该如何应用
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                oBtn.onclick=function(){
                    alert('a');
                }
                oBtn.onclick=function(){
                    alert('b');
                }
            }

        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>

这是同样是只会显示最后一个b。跟刚刚的一样。这时候我们用到事件绑定
IE方式
attachEvent（事件名称，函数），这个呢是事件绑定的处理函数，现在我们加进去试一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
//              oBtn.onclick=function(){
//                  alert('a');
//              }
//              oBtn.onclick=function(){
//                  alert('b');
//              }
                //attachEvent(事件要加'',后面是函数)
//              这种方法只兼容IE
                oBtn.attachEvent('onclick',function(){
                    alert('a');
                });
                oBtn.attachEvent('onclick',function(){
                    alert('b');
                });

            }

        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>

当然还有除IE以外的写法
addEventListener（函数名称，函数，捕获），用法一样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
//              oBtn.onclick=function(){
//                  alert('a');
//              }
//              oBtn.onclick=function(){
//                  alert('b');
//              }
                //attachEvent(事件要加'',后面是函数)
//              这种方法只兼容IE
//              oBtn.attachEvent('onclick',function(){
//                  alert('a');
//              });
//              oBtn.attachEvent('onclick',function(){
//                  alert('b');
//              });
//非IE下起作用
                oBtn.addEventListener('click',function(){
                    alert('a')
                },false);
                oBtn.addEventListener('click',function(){
                    alert('b')
                },false);
            }

        </script>
    </head>
    <body>
        <input type="button" name="btn" id="btn" value="点击" />
    </body>
</html>

切记，这两种写法不能同时直接写。要想一起用就得用就得给他个 if，else。或者直接封装成一个函数调用。
我就直接介绍封装后的函数一起看下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//                   这个函数里面(对象,事件,函数)
        function addEvent(obj,ev,fn){
//          给判断(如果这个对象用的是attachEvent)
            if(obj.attachEvent){
//              那么就用IE的
                obj.attachEvent('on'+ev,fn);
            }
            else{
//              否则就用 非IE的写法
                obj.addEventListener(ev,fn,false);
            }
        }
            window.onload=function(){
                var oBox=document.getElementById("box");
//              下面就是调用
                addEvent(oBox,'click',function(){
                    alert('a');
                });
                addEvent(oBox,'click',function(){
                    alert('b');
                });
            }
        </script>
    </head>
    <body>
        <input type="button" name="box" id="box" value="点击" />
    </body>
</html>

这样在任何浏览器都可以使用。仅供参考！

瞧我的记性又把你当人看了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
真正的了解事件绑定

一、事件绑定想了解什么是事件绑定前，我先写个小例子看一下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){
复制链接

扫一扫

专栏目录