onclick和addeventlistener的区别(js有关addEventListener的问题)
本文目录
- js有关addEventListener的问题
- addEventListener和普通.onclick的区别
- addEventListener和onclick的区别
- JS addEventListener(“click“)这里的click为什么不加on
- addEventListener和attachEvent以及element.onclick的区别
js有关addEventListener的问题
直接onclick 这个事件会被覆盖。
addEventListener 这个是事件绑定,事件内容不会被覆盖。
button.onclick = function(){alert(1)};
button.onclick = function(){alert(2)};
button.addEventListener(“click“,function(){alert(“xx“),false});
button.addEventListener(“click“,function(){alert(“yy“),false});
执行一下,就知道结果了。
addEventListener和普通.onclick的区别
addEventListener是在FireFox上的用法。
addEventListener的参数一共有三个,语法为:
element.addEventListener(type,listener,useCapture)
详解
其中element是要绑定函数的对象。
type是事件名称,要注意的是“onclick“要改为“click“,“onblur“要改为“blur“,也就是说事件名不要带“on“。
listener当然就是绑定的函数了,记住不要跟括号
最后一个参数是个布尔值,表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false
区别:varbtn1Obj=document.getElementById(“btn1“);//element.addEventListener(type,listener,useCapture);btn1Obj.addEventListener(“click“,method1,false);btn1Obj.addEventListener(“click“,method2,false);btn1Obj.addEventListener(“click“,method3,false);执行顺序为method1-》method2-》method3
document.getElementById(“btn“).onclick=method1;document.getElementById(“btn“).onclick=method2;document.getElementById(“btn“).onclick=method3;如果这样写,那么将会只有medhot3被执行
addEventListener和onclick的区别
addEventListener是在 FireFox 上的用法。
addEventListener的参数一共有三个,语法为:
element.addEventListener(type,listener,useCapture)
详解
其中element是要绑定函数的对象。
type是事件名称,要注意的是“onclick“要改为“click“,“onblur“要改为“blur“,也就是说事件名不要带“on“。
listener当然就是绑定的函数了,记住不要跟括号
最后一个参数是个布尔值,表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false
区别:《pre t=“code“ l=“java“》var btn1Obj = document.getElementById(“btn1“);
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener(“click“,method1,false);
btn1Obj.addEventListener(“click“,method2,false);
btn1Obj.addEventListener(“click“,method3,false);执行顺序为method1-》method2-》method3 《pre t=“code“ l=“java“》document.getElementById(“btn“).onclick = method1;
document.getElementById(“btn“).onclick = method2;
document.getElementById(“btn“).onclick = method3;如果这样写,那么将会只有medhot3被执行
JS addEventListener(“click“)这里的click为什么不加on
onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么
2.click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件
3.添加EventListener,传的参数是事件的名称,例如“click“
以上是click(), onclick(), click的区别
addEventListener和attachEvent以及element.onclick的区别
attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加“on“, 可以添加多个事件处理程序,按照添加顺序相反的顺序触发; addEventListener是给非ie添加事件处理程序,接收三个参数,第一个是事件名,不需要加“on”, 第二个是绑定的函数,第三个参数是一个布尔值,是事件的方式,意思是是否使用useCatch方式, 如果是false,就使用传统的冒泡方式,如果为true,就在捕获阶段调用事件处理程序。 addEventListener可以添加多个事件处理程序,按照添加顺序触发 二者有个本质上的区别,attachEvent的事件处理程序会在全局作用域中运行,this等于window对象, 而addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行的,this等于绑定元素对象。
更多文章:
免费自动连接wifi(怎样设置电脑开机后自动开启360免费wifi)
2024年7月1日 23:35
天庭战神怎么打攻略?天庭最厉害的战神是谁,不是杨戬,不是哪吒,他是谁
2024年5月2日 03:53
logo设计在线生成免费(自己在线制作logo免费,有什么好用的logo手机制作软件吗)
2024年10月12日 03:45
火影online(火影忍者online什么角色适合平民玩家)
2024年1月21日 08:20
qq技术导航(在手机QQ聊天里面,有发送位置共享,以前直接点别人发过来的地图,就可以用导航软件直接导航过去,现在)
2024年5月3日 08:35
matlab6 5(matlab 6,5怎么读不出excel的文字)
2023年11月15日 08:00
连连看经典旧版下载免费(经典的连连看单机版的,很久以前的,玩习惯的,现在想找都找不到,是一只黄色小恐龙的,宠物小精灵的!)
2024年6月25日 19:16
哪些期货公司开户好银河期户好不好,专业性和公司实力怎么样?用银河期货的人多吗这个平台怎么样
2024年3月22日 23:12