总结：js中onclick(事件)的5种使用方式

发布时间：2025-12-10 11:20:14 浏览次数：11

以下为onclick的使用技巧，全部经过个人验证，如要转载，请标明出处。
不限于onclick，所有事件都可以这样操作
事件如下：

第一种：

直接在标签中 οnclick="…"，里面写上修改标签属性的语句/输入输出语句

开始
按下按钮 5，输入123
显示
5变成9，并且底色改变

如果不行，建议使用Google浏览器

第二种：

在标签中写 οnclick="函数1();函数2();函数3();"

太简单，就不演示了

第三种：

在js种使用 “x.οnclick=函数名;”

<body><button id=d1>1</button></body><script>var b1 = document.getElementById("d1");b1.onclick = f4;function f4() {console.log("第三种方式");//this代表调用该函数的元素对象this.style.backgroundColor = "red";}</script>

b1.onclick = f4; 在script执行时函数 f4不会执行，控制台没有输出，只有点击"1"按钮，才会执行该函数。
注意：如果写成函数名()，onclick不会起作用，当作正常函数执行。
this不再是b1元素对象，直接报错。

第四种：

这是第三种的进阶版，用循环给每个button赋予onclick事件，当点击一个button时，该按钮变红

<body><button id=d1>1</button><button>2</button><button class=c1>3</button><button>4</button><button>5</button><button>6</button></body><script>var s = document.getElementsByTagName("button");function f4() {console.log("第三种方式");this.style.backgroundColor = "red";}//给每个button设置onclick事件for(var i=0;i<s.length;i++){s[i].onclick=f4;}</script>

点击按钮 1，效果如下：
再依次点击 3 6，效果如下

第五种：

使用 “x.οnclick=function(){…}”，{}之间可以调用函数，也可以直接写js语句。

<body><button id=d1>1</button></body><script>var b1 = document.getElementById("d1");b1.onclick=function(){f4(29,this);console.log("二次输出");}function f4(itemp,ele) {//设置2个形参console.log("第三种方式"+" "+itemp+" "+ele);ele.style.backgroundColor = "red";//this.style.backgroundColor = "red";//this失效}</script>

点击按钮1 效果如下：

目前学过的事件：
onclick：鼠标单击事件
onmousedown：鼠标下降沿事件
onmouseup：鼠标上升沿事件
ondblclick：鼠标双击事件
onmouseover：鼠标进入该标签事件
onmouseout：鼠标离开该标签事件
onmousemove：鼠标在该标签上移动事件
表单事件：
onblur:失去焦点（光标）事件
onfocus：获取焦点
onchange:内容改变了事件

事件监听器例子：

<body><button id=d1>按钮</button><p id=p1></p><script>var x = document.getElementById("d1");//buttonvar x1 = document.getElementById("p1");//p，用来插入语句x1.style.border="1px blue solid";x.addEventListener("mouseover", f1);x.addEventListener("click", f2);x.addEventListener("mouseout", f3);function f1() {x1.innerHTML += "鼠标移入<br>";}function f2() {x1.innerHTML += "鼠标双击<br>";}function f3() {x1.innerHTML += "鼠标移出<br>";}</script></body>

经验证：
<script></script>可以写在body的里面，也可以写在外面
还可以写在另一个文档用，<script src="1.js"></script> 链接

上一篇：学影视动漫以后好找工作吗？找不找得到工作(学动漫好找工作吗男生) 下一篇：动漫人物的简单画法(简单动漫人物绘画漂亮)

综合百科