addEventListener的click和onclick的区别
前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料
事件绑定
onclick绑定方式
优点:
- 简洁
- 处理事件的this关键字指向当前元素
缺点:
- 不能对事件捕获或事件冒泡进行控制,只能使用事件冒泡,无法切换成事件捕获
- 一次只能对一个元素绑定一个事件处理程序,当使用window.onload属性时,会覆盖采用相同方法所绑定的事件代码
//this与event查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息
dd.onclick = function(event){
console.log(event.target.innerHTML);//event.target指向的是dd元素,以及他的所有信息
console.log(this.innerHTML);//this也是指向dd元素,包含他的可用信息
}
//注意:有时也会有需要使用this的情况
//当需要鼠标移入和移出的时候 event会触发该事件每一个子元素
dd.onmouseover = function(event) {
this.style.backgroundColor = "red";//不会改变子元素
event.target.style.backgroundColor = 'red';//会改变子元素
};
dd.onmouseout = function(event) {
this.style.backgroundColor = "green"
event.target.style.backgroundColor="green"
};
addEventListener绑定方式
优点:
- 可以支持事件处理的捕获阶段,也可以支持时间处理的冒泡阶段,两个阶段都是通过addEventListener最后一个参数设置为false(默认值,表示事件冒泡)或者true(表示事件捕获)来切换
- 事件处理 this与onclick一样
- 事件处理函数中,event对象总是作为第一个可用参数
- 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 (按照顺序执行)
缺点:
- IE8以下不支持
dd.addEventListener('click',function(e){
console.log(this.innerHTML);
console.log( e.target.innerHTML );
},false);
demo如下
<input type="button" id="iS_addEventListener" value="addEventListener">
<input type="button" id="iS_onclick" value="onclick">
<script type="text/javascript">
(function(){
document.getElementById("iS_addEventListener").addEventListener("click",function(){
alert("我是addEventListener1");
},false);
document.getElementById("iS_addEventListener").addEventListener("click",function(){
alert("我是addEventListener2");
},false);
//onclick是重新赋值,变量提升
document.getElementById("iS_onclick").onclick = function() {
alert("我是onclick1");
}
document.getElementById("iS_onclick").onclick = function() {
alert("我是onclick2");
}
})();
</script>
结果是onclick只出现一次alert:我是click2【很正常第一次click事件会被第二次所覆盖】,但是addEventListener却可以先后运行,不会被覆盖【正如:它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】
解除事件绑定
对于onclick,直接 dd.onclick = null;
对于addEventListener则需要,oElement.removeEventListener(sEvent,fnHandler,false);
阻止事件冒泡
e.stopPropagation(); 或 return false;
dd.onclick = function(e){
console.log(e.target.innerHTML);
this.style.color = 'red';
//阻止事件冒泡
//防止点击dd的时候隐藏了父级domClick
e.stopPropagation(); //或 return false;
}
区别:
return 可以同时阻止冒泡,且阻止事件的默认行为>
[比如a点击链接时跳转到百度,return false,便会阻止跳转]
event.stopPropagation();
阻止事件的进一步传播.(冒泡阶段和捕获阶段)
更多专业前端知识,请上 【猿2048】www.mk2048.com
addEventListener的click和onclick的区别相关推荐
- click()和onclick()的区别
click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...
- js中click()与onclick()的区别
由一个简单示例到 js中click()与onclick()的区别 之前朋友在学习js的时候遇到一个有意思的问题. 先贴一份代码说一下代码构成 这里是html结构 <ul><li> ...
- jQuery中click和onclick的区别
click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...
- JS中click和onclick本质区别
本文主要JavaScript中click和onclick本质区别 click是一个方法,onclick是一个事件. 求同: 告诉浏览器在鼠标点击时候要做什么. 存异: click属于方法,是JS语句直 ...
- click和onclick的区别
click与onclick区别 click是对象的方法,onclick是事件,当我们点击按钮是,首先触发的是事件,然后是方法: <html> <head><title&g ...
- click 和 onclick 的区别
onclick 是绑定事件,告诉浏览器在鼠标点击时候要做什么. click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件. click 是对象 ...
- click和onclick事件区别
onclick()方法,是当鼠标点击后,该标签会执行onclick方法 click()方法是不论鼠标点不点,都会执行一次该方法 @onclick()=" aaa() " @clic ...
- js中的click和onclick事件区别
1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 2.click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件
- HTML中click()和onclick()的本质区别与案例和解释
HTML中click()和onclick()的本质区别与案例和解释:分为四点: 第一点:英文翻译: On的意思为 :打开,接通,鼠标事件的触发条件: 表明onclick()代表的是一个事件:而在HTM ...
最新文章
- 《Android构建MVVM》系列(一) 之 MVVM架构快速入门
- 体重 年龄 性别 身高 预测鞋码_【新手扫盲】身高体重性别年龄身体素质影响玩滑板吗?...
- strerror和perror函数详解
- “向日葵”远程控制软件,方舟Q2硬件付费/免费功能全面评测,拔草向
- 蓝桥杯,基础练习 Fibonacci数列(斐波那契数列) C++
- Flash actionscrip视频教程
- Android IntentService deprecated|笔记
- 词性标注英文简称及分类
- 互联网面试知识点总结(三)- 计算机网络篇
- javaScript:结合mousedown、mousemove、mouseup事件,实现拖动方块在页面内移动(代码)
- python docx转换成txt文本
- 阿里云免费教你使用营销引擎
- DVWA V1.9:Reflected Cross Site Scripting(存储型XSS)
- 好东西——计算机原理学习(序)
- ChatGPT聊天软件开发
- linux查杀minergate-cli/minerd病毒
- 【Go】Goland下载与安装教程(详细)
- java计算机毕业设计高校共享单车管理系统源码+mysql数据库+系统+lw文档+部署
- SVN本地部署server和cleint 并用阿里云盘自动备份
- 基于BIM(Revit平台)的铝模设计软件产品
热门文章
- 鸿蒙开发者社区入口,鸿蒙OS 社区
- 我们知道计算机的大小单位有 B, KB, MB 等,现在请你编写一个计算器进行大小单位换算。Java洛谷传智杯
- 图像的常用压缩技术以及视频码率的计算
- # 管道已结束_县城这条路启用自来水新管道,看看是否在你家附近...
- opengl 区域填充之种子填充线扫描法
- 将Android源码集成到Eclipse中的方法
- js对象序列化为json字符串
- Java Executors(线程池)
- python 中的三元表达式(三目运算符)
- Wireshark图解教程(简介、抓包、过滤器)