JS普通添加事件和事件绑定的区别

很简单,看代码。

普通添加事件的方法:

var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}

执行上面的代码只会alert 2

事件绑定方式添加事件:

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);

执行上面的代码会先alert 1 再 alert 2

这样就可以发现这两种方法的区别了,普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。

提示:addEventListener不兼容低版本IE,使用addEventListener添加事件之前,请先处理兼容问题,这里就不展开讨论了。

时间: 2024-12-28 23:51:39

JS普通添加事件和事件绑定的区别的相关文章

【原生js】js动态添加dom,如何绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

向JS对象添加和删除事件

this.removeEventListener = function (obj, ename, func) { var store = obj[this.addEventListener.pre + ename]; if (!store) { return; } var i = store.indexOf(func); if (i < 0) { return; } obj[this.addEventListener.pre + ename].splice(i, 1); }; this.addE

给js创建的一个input数组绑定click事件

</pre><pre name="code" class="javascript"><html> <body> <input type="button" name="input[]" value="按钮1" /><br /> <input type="button" name="input[]&quo

4.Knockout.Js官网学习(事件绑定)

前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h2>ClickBind</h2> <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="

js原生添加事件的方式

js原生添加事件的方式: 1. 直接在html标签上添加 <div onclick="alert('div')">div</div> 2. 用dom的on...方法添加 document.getElementById('div').onclick = function () {alert('div')}; 3. 用addEventListener或attachEvent添加 document.getElementById('div').addEventListe

js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 要在按钮上为click事件添加事件处

JS事件基础和绑定

一.事件的分类 鼠标事件 键盘事件 表单事件 页面事件 二.事件驱动 .事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 事件源 引发事件的元素.(发生在谁的身上) 事件处理程序 对事件处理的程序或是函数 (发生了什么事) 三.事件的绑定 在脚本中绑定 直接在HTML元素绑定 四.同个元素添加绑定多个事件 手动输入,自定义 IE: 对象.attachEvent("事件(on)","处理程序")   添加 对象.detachEvent(&q

JS添加/移除事件

事件的传播方式 <div id="father"> <div id="son"></div> </div> <script> //事件传播有两种方式 //自下而上 从子级到父级是 事件冒泡 //自上而下 从父级到子级是 事件捕获 var son = document.getElementById("son"); var father = document.getElementById(&

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {