总结：js中事件的5种使用方式_js事件调用-优快云博客

本文详细介绍了JavaScript中事件的五种使用方法，包括在标签中修改属性、调用函数、在JS中设置函数、循环调用函数以及使用匿名函数。涉及的事件有onclick、onmousedown等，同时提及了事件监听器的概念。

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

第一种：在标签中修改属性

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

<button onclick="window.alert(window.prompt());this.innerText='9';this.style='background-color:red'">5</button>

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

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

第二种：在标签中调用函数

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

<button id=d1 onclick="f1();f2();f3()">1</button>

太简单，就不演示了

第三种：在js中调用函数

在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元素对象，直接报错。

第四种：在js中循环调用函数

这是第三种的进阶版，用循环给每个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，效果如下

第五种：在js中调用函数

使用 “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>
	<div id=p1></div>
	<script>
		var x = document.getElementById("d1");//button
		var x1 = document.getElementById("p1");//div，用来插入语句
		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>