JS绑定事件三种方式

╰半橙微兮° 2023-07-22 04:58 58阅读 0赞

## 三种方式 ##

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

<input type="button" value="点我呦" οnclick="alert("hello world!")"/>  
  
<input type="button" value="点我呦" οnclick="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()\{\} 的格式，举例如下

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

优点

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

缺点：

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

三、通过事件监听函数绑定  
      使用 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();