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添加事件之前,请先处理兼容问题,这里就不展开讨论了。

原文:http://blog.sucaijiayuan.com/article/72

时间: 2024-10-25 01:26:34

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

原生js跨浏览事件绑定(移除)/javascript事件绑定(移除)

网上找了半天没看到,都是基于ie attachEvent(有诸多的问题存在)来写的,所以手动写了个js模拟绑定事件希望能帮到需要的童鞋 addEvent = function(obj,type,fn){  if(obj.addEventListener) {//W3C   obj.addEventListener(type,fn,false);  }else if (obj.attachEvent) {//ie(期待它的灭亡)   if(!obj.events) obj.events = {};

事件绑定和阻止默认事件

5月29,30日 终于到了这一天.晚上有数据结构课,10点多的火车,我们就没有去上课,下午在宿舍里收拾东西,晚上8点左右从南校出发,9点半多到达火车站和老师学长学姐们会和. 第一次去北京,第一次买的卧铺,真的很兴奋.对这次北京之行满满的都是期待.卧铺,躺在上面很舒服,因为第一次,不知道还需要换票,就把票放在包里了,找了一会才找到,看来还是得把票随身带着.卧铺晚上熄灯,我看了一部电影,然后就睡着了,一觉睡到五点多.上午看了看模板,这次蓝桥杯决赛说实话没有怎么认真的准备,做的题也比较少.把一些小的知

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

jquery事件函数和原生事件绑定函数中return false的区别

一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件绑定事件的话,事件函数返回false会是个什么情况,看看是不是和jquery一个样:<!doctype html><html>        <head>                <meta charset='utf-8' />             

JS 给多个对象添加事件

废话不多说代码如下: 方法一: <em>v</em>ar pArys=document.getElementsByClassName("ps"); for(var i = 1; i <= pArys.length; i++){ //alert(i) var pAry = document.getElementById("p"+i); pAry.onclick=function(){ this.style.fontSize="3

用JS给浏览器的关闭按钮添加事件

以下是指在js中实现,而非 <body onunload="close()"> 这种方法! 因为这样是在unload掉body的时候触发,而无聊任何浏览器,都会在关闭的时候unload掉body的! 模型1:function close(){ alert("sdfsdfsdf");} window.onbeforeunload=close; 模型2:function close(){ if(document.body.clientWidth-event.

使用addeventlistener为js动态创建的元素添加事件监听

点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul></ul> <script type="text/javascript"> var num = 1; var u=document.querySelector("ul"); function addFunction(){ var l=docume

关于js中对事件绑定与普通事件的理解

普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  tag class)获取元素,给元素添加特定的方法(如:onclick): 扩展:事件监听addEventListener事件可以绑定多次事件,并进行触发 div1.onclick = function(){}; <button onmouseover = " "></but

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme