js-事件绑定

最新推荐文章于 2024-01-03 10:05:34 发布

long冰

最新推荐文章于 2024-01-03 10:05:34 发布

阅读量343

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011546421/article/details/52797701

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件：JavaScript中的事件是由访问web页面用户的一系列操作引起的，比如点击鼠标，键盘按键等。当用户执行某些操作的时候再去执行一些代码。

事件处理函数分为三类：鼠标点击事件，键盘按键事件，HTML事件；每一个事件都有自己的触发范围，如果超出了这个范围，就不会起作用

事件模型：内联模型、脚本模型、DOM2模型
- 内联模型：事件处理函数是html元素的一个属性，即把事件处理函数代码写在html文件中

在HTML中把事件处理函数作为属性来执行JS代码

<div id="d1" οnclick="alert('事件函数')">

测试DIV

</div> 注意其中的单双引号

<div id="d1" οnclick="box()">

测试DIV

</div>
PS: 不能够将box函数放在window.onload中，否则就看不到这个函数

- 脚本模型：内联模型违反了HTML和JS代码分离的原则，所有可以在JS中处理事件，就是脚本模型

脚本模型中首先是通过DOM来获得元素，然后给元素绑定事件处理函数：　　　

元素名.事件处理函数名 = 绑定的函数名

绑定函数的时候，有两种方法

一种是绑定匿名函数：

box.onclick = function(){}；
一种是绑定外部通用函数：

box.oncclick = click；这种模式中注意，后面是赋值click函数的函数名，是没有添加括号的，如果添加了括号就是执行函数而不是绑定函数(注册函数)

在实际实战项目当中，我们的工作是分开给团队成员分工合作的，假设每个成员都会想用自己的window.onload，但是我们可以用简单的的程序来证明，直接写两个window.onload在js文件里面，起作用的是后面的那个事件；

如下：

那这个时候我们就需要用到事件绑定了。

IE方式

attachEvent（事件名称，函数）。绑定事件处理函数
detachEvent(事件名称, 函数)，解除绑定

DOM方式

addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

下面先举个例子：
1、在IE浏览器中的写法：//attachEvent(事件名，函数)

    <!DOCTYPE HTML>
       <html>
       <head>
       <meta charset="utf-8">
       <title>无标题文档</title>
       <script>
           window.οnlοad=function ()
           {
               var oBtn=document.getElementById('btn1');

               oBtn.attachEvent('onclick', function ()
               {
                   alert('a');
               });
               oBtn.attachEvent('onclick', function ()
               {
                   alert('b');
               });
           };
       </script>
       </head>
       <body>
       <input id="btn1" type="button" value="按钮" />
       </body>
       </html>

IE是先弹出b再弹出a的

2、在非IE中的写法：//addEventListener(事件名, 函数, false)

<!DOCTYPE HTML>
   <html>
   <head>
   <meta charset="utf-8">
   <title>无标题文档</title>
   <script>
       window.οnlοad=function ()
       {
           var oBtn=document.getElementById('btn1');


           oBtn.addEventListener('click', function ()
           {
               alert('a');
           }, false);
           oBtn.addEventListener('click', function ()
           {
               alert('b');
           }, false);
       };
   </script>
   </head>
   <body>
       <input id="btn1" type="button" value="按钮" />
   </body>
   </html>

非IE是先弹出a再弹出b的

js中好东西都不兼容，兼容写法可将上面两个函数合并

<script>
       window.οnlοad=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.οnlοad=function ()
       {
           var oBtn=document.getElementById('btn1');

           myAddEvent(oBtn, 'click', function (){
               alert('a');
           });

           myAddEvent(oBtn, 'click', function (){
               alert('b');
           });
       };
   </script>

再回到文章开头讲的，实战中要用到两个window.onload

<script>
       function myAddEvent(obj, ev, fn)
       {
           if(obj.attachEvent)
           {
               obj.attachEvent('on'+ev, fn);
           }
           else
           {
               obj.addEventListener(ev, fn, false);
           }
       }
       myAddEvent(window,'load',function ()
       {
           alert('a');
       });
       myAddEvent(window,'load',function ()
       {
           alert('b');
       });
   </script>

long冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-事件绑定

事件：JavaScript中的事件是由访问web页面用户的一系列操作引起的，比如点击鼠标，键盘按键等。当用户执行某些操作的时候再去执行一些代码。事件模型：内联模型、脚本模型、DOM2模型内联模型：事件处理函数是html元素的一个属性，即把事件处理函数代码写在html文件中在HTML中把事件处理函数作为属性来执行JS代码测试D
复制链接

扫一扫