<input type="button" onclick="clickBtn()" class="btn" value="click">
function clickBtn() {
alert("Hello world!");
}
<input type="button" value="click" class="btn">
var button = document.querySelector(".btn");
button.addEventListener(
"click",
function () {
alert("HELLO WORLD!");
},
false
);
addEventListener有三个参数
选择要出现的事件,事件有很多种,不只是 click。
中间为匿名 function,带入要出现的功能。
布林值,决定要不要产生冒泡事件,如果不指定,会自动产生冒泡事件。(预设值为false)(下次再讨论。)
onclick 与 addEventListener 的差别
<input type="button" value="btn1" class="btn1">
<input type="button" value="btn2" class="btn2">
// onclick 效果
var btn1 = document.querySelector(".btn1");
btn1.onclick = function () {
alert("a-1");
};
btn1.onclick = function () {
alert("a-2");
};
//addEventListener效果
var btn2 = document.querySelector(".btn2");
btn2.addEventListener(
"click",
function () {
alert("b-1");
},
false
);
btn2.addEventListener(
"click",
function () {
alert("b-2");
},
false
);
执行後会发现 onclick 只会执行第二个 alert ,而不是两个都执行。
而 addEventListener 两个 alert 都会执行。
今天就到这结束了。
哈罗,我是Eason,欢迎来到我的 「WordPress 再进化,用 Next.js 拆分前端,实现...
What is JavaScript? HTML is like the structure/bon...
前言 今天要来介绍一下用於数学运算的函式,sqrt 开根号,以及 square 平方 NumPy n...
第1个决定 决定ERP实施平台 WebForm Or WinForm 写ERP程序之前的第一件事就是...
欢迎对话的发生 展现Accept and Allow,营造愿意开口的环境 要塑造这样的信赖文化,是一...