on事件和addevent事件的区别

on事件

 function fn1(){alert(1)};function fn2(){alert(2)};
document.onclick=fn1();
document.onclick=fn2();

只会弹出2
- 使用on事件，给标签加多个事件的时候后面的会覆盖前面的。

 function fn1(){alert(1)};function fn2(){alert(2)};document.addEventListener('onclick',fn1()); //1        document.addEventListener('onclick',fn2()); //2

.addEvent事件监听可以给一个标签添加多个事件,并且之前的不会被覆盖掉
- addevent里面可以传递三个参数：
* 1.addevent 里面的参数,第一个是传入对应的事件的类型(注意不要加on)
* 2.addevent 第二个参数,就是函数的回调
* 3.bool类型取值,如果是false(默认就是),事件的触发机制就会按照冒泡(从下往上),如果是true,就会按照事件捕获,从上往下
例如：

  <style>.div1{width: 300px;height: 300px;background: red;margin: 100px auto;  }.div2{width: 200px;height: 200px;background: blue;  }.div3{width: 100px;height: 100px;background: green;}</style><script>window.onload=function(){div1.addEventListener("click",function(){alert(1);} ,false);div1.addEventListener("click",function(){alert(2)} ,true);div3.addEventListener("click",function(){alert(3)} ,false);}</script>
</head>
<body>
<div class="div1"><div class="div2"><div class="div3"></div></div>
</div>
</body>

给div1，div3 添加点击事件，依次弹出2,3,1

 1. div1.addEventListener("click",function(){alert(1);} ,false);2. div1.addEventListener("click",function(){alert(2)} ,true);3.div3.addEventListener("click",function(){alert(3)} ,false);

分析代码：从上往上看代码，点击div1, 有一个事件进来，为false所以没反映，不会弹；第二段代码中为true，div1捕获到事件弹出2；第三段代码，false同样没反应。事件出去触发第三段代码，弹出3；接着往上走，走到第一段代码弹出1

false：冒泡，就是如果有一个出去的事件触发了你，你就去执行这个函数
true：捕获，如果有一个进来的事件触发了你，你就去执行这个函数

on事件和addevent事件的区别相关推荐

IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件示例: <body> <div> <butt ...
你知道socket.io中connect事件和connection事件的区别吗?
server端的socket.io中有两个连接事件.一个是.on('connect'),一个是.on('connection'). 官网上没有对这两个事件的区别进行解释. 那么这两个事件有什么区别呢? ...
onchange事件与onpropertychange事件的区别
onchange事件与onpropertychange事件的区别 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能还是相等的)且失去 ...
jQuery学习（一）—jQuery应用步骤以及ready事件和load事件的区别
jQuery应用步骤以及ready事件和load事件的区别一.jQuery应用步骤第一步:利用script标签的src属性引入jQuery文档第二步:创建一个script标签,在该script下 ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
input事件和change事件的区别
今天在监听<input>输入框的内容变化时监听的是change事件,本意是希望输入框内容一发生变化就执行事件监听方法,但是在运行时却发现我在输入框中输入了内容,但是监听事件并没有执行,改用 ...
input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...
微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别
摘要: 在微信小程序中,bindtap事件会产生冒泡,若不加以拦截,会一直冒泡到顶端.在某些情况下,一次点击会触发若干点击事件.为了防止冒泡,使用catchtap即可解决问题.在有全屏半透明背景的弹出 ...

on事件和addevent事件的区别

on事件

on事件和addevent事件的区别相关推荐

最新文章

热门文章