JS绑定事件三种方式

最新推荐文章于 2024-09-14 11:11:16 发布

宿陌

最新推荐文章于 2024-09-14 11:11:16 发布

阅读量1.5w

点赞数 7

分类专栏： JS 文章标签：事件绑定

本文链接：https://blog.csdn.net/qq_37860994/article/details/83758480

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

三种方式

1、在DOM中直接绑定
2、在JS代码中直接绑定
3、使用事件监听函数绑定事件
一、在DOM中直接绑定
也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子：

<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
   function testAlert(){
      alert("hello world!");
   }
</script>

缺点：

不利于行为和结构相分离，耦合度太高，不建议在项目中使用。
在遇到相同类型的事件时，只会去处理第一个事件，而忽略后续的事件。
传统方法只会在事件冒泡中运行，而非捕获和冒泡
事件对象参数(e)仅非IE浏览器可用

优点：

非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
处理事件时，this关键字引用的是当前元素

事件解绑
对象.on事件名字=null;

<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
    document.getElementById("btn1").onclick = function () {
        console.log("码仙");
    };
    document.getElementById("btn2").onclick = function () {
        document.getElementById("btn1").onclick = null;
    };
</script>
</body>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象，对其绑定，elementObject.οnclick=function(){} 的格式，举例如下：

<input type="button" value="点我呦"  id="demo">
<script type="text/javascript">

   document.getElementById("demo").onclick=function testAlert(){
      alert("hello world!");
   }
</script>

优点

将行为与结构分离开了
非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
处理事件时，this关键字引用的是当前元素

缺点：

传统方法只会在事件冒泡中运行，而非捕获和冒泡
一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
事件对象参数(e)仅非IE浏览器可用

事件解绑
对象.on事件名字=null;

<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
    document.getElementById("btn1").onclick = function () {
        console.log("码仙");
    };
    document.getElementById("btn2").onclick = function () {
        document.getElementById("btn1").onclick = null;
    };
</script>
</body>

三、通过事件监听函数绑定
使用 attachEvent(IE方式) 和 addEventListenter(W3C方式) 的好处就是，可以多次的进行事件的绑定，不向原始的方法那样，前面绑定的事件将会被后面的绑定的事件所覆盖，最后只能执行后面所绑定的函数。

从网上找到了一个兼容的好办法，相比较if…else…语句，这个方法用的是

function addEvent(obj,type,handle){
   try{
     obj.addEventListener(type,handle,false);
   }catch(e){
     try{
       obj.attachEvent('on'+type,handle);
     }
     catch(e){
       obj['on' + type]=handle;//早期浏览器
     }
   }
}

W3C绑定的优点

1.该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
2.在事件处理函数内部，this关键字引用当前元素。
3.事件对象总是可以通过处理函数的第一个参数(e)捕获。
4.可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

W3C绑定的缺点

IE不支持，你必须使用IE的attachEvent函数替代。

IE方式的优点

可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。

IE方式的缺点

1.IE仅支持事件捕获的冒泡阶段
2.事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
3.事件对象仅存在与window.event参数中
4.事件必须以ontype的形式命名，比如，onclick而非click
5.仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

解除绑定

1.绑定事件对象.addEventListener(“没有on的事件类型”,命名函数,false);
解绑事件对象.removeEventListener(“没有on的事件类型”,函数名字,false);
2.绑定事件对象.attachEvent(“on事件类型”,命名函数);
解绑事件对象.detachEvent(“on事件类型”,函数名字);

四、说说JQuery中绑定事件的几种方法。

主要有on()、bind()、live()、delegate()等几种，相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。

2 这几种方法中各自有对应支持的JQuery版本。

3 在给动态添加的页面元素绑定事件时，通常用on()方法。

具体的更多了解，可以点击这个链接:http://www.cnblogs.com/DemoJin/p/4794372.html。
JavaScript之事件的绑定与移除:http://www.cnblogs.com/Ayinger/p/6723730.html

    //阻止事件冒泡
    // IE特有的,谷歌支持,火狐不支持
    window.event.cancelBubble=true;
           
           
    //阻止事件冒泡
    //谷歌和火狐支持
    event.stopPropagation();