JS事件监听

事件绑定

方式一:通过HTML标签中的事件属性进行绑定

 <input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert( '我被点击了!')
};
< /script>

方式二:通过DOM元素属性绑定

 <input type="button" id="btn" value="按钮2">
<script>
document.getElementById("btn").onclick=function(){
alert('我被点击了! ');
}
</script>

代码

常见事件

鼠标单击事件onclick

  
<body>
<!--方式一：通过标签的属性来进行事件绑定-->
<input type="button" name="btn1" value="事件绑定1" onclick="on()">
<input type="button" name="btn2" value="事件绑定2">
 
 
<!--事件绑定-->
<script>
    function on() {
        alert("按钮1被点击了");
    }
 
    /*通过DOM元素属性绑定*/
    document.getElementById("btn2").onclick=function () {
        alert("按钮2被点击了");
    }
 
 
</script>
 
</body>

其他

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS常见事件</title>
</head>
<body onload="load()">
 
<form action="" style="text-align: center" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
 
    <input id="b1" type="submit" value="提交">
 
    <input id="b2" type="button" value="单击事件" onclick="fn1()">
 
</form>
<br><br><br>
 
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
    <tr align="center">
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
        <th>评语</th>
    </tr>
    <tr align="center">
        <td>001</td>
        <td>张三女</td>
        <td>90</td>
        <td>很优秀</td>
    </tr>
 
    <tr align="center">
        <td>002</td>
        <td>李四</td>
        <td>92</td>
        <td>优秀</td>
    </tr>
</table>
 
<script>
    //onload :页面/元素加载完成后触发
    function load() {
        console.log("页面加载完成...");
    }
    //onclick : 鼠标点击事件
    function fn1() {
        console.log("我被点击了...");
    }
 
    //onblur : 失去焦点事件
    function bfn() {
        console.log("失去焦点");
    }
 
    //onfocus : 元素获得焦点
    function ffn() {
        console.log("获得焦点");
    }
 
    //onkeydown : 某个键盘的键被按下
    function kfn() {
        console.log("键盘被按下了");
    }
 
    //onmouseover: 鼠标移动到元素之上
    function over() {
        console.log("鼠标移入了");
    }
 
    //onmouseout: 鼠标移除某元素
    function out() {
        console.log("鼠标移入了");
    }
 
    //onsubmit : 表单提交事件,作用在表单上
    function subfn() {
        alert("表单被提交了...");
    }
 
 
</script>
 
</body>
</html>

案例

要求

  
<script>
    //1.点击"点亮"按钮，点亮灯泡；熄灭按钮，熄灭灯泡
    function on() {
        //获取img元素
       var img = document.getElementById('light');
       //修改src
        img.src="../../img/on.gif";
    }
 
    function off() {
        //获取img元素
        var img = document.getElementById('light');
        //修改src
        img.src="../../img/off.gif";
    }
 
    // 2.输入框聚焦变成小写，离焦转大写
    function lower() {//小写
      var name =  document.getElementById('name');
        name.value= name.value.toLowerCase();
    }
    function upper() {//大写
        var name =  document.getElementById('name');
        name.value= name.value.toUpperCase();
    }
 
    //3.全选：所有复选框选中；  反选：所有复选框未选中
 
    function checkAll() {
        var hobby=document.getElementsByName('hobby');
        for (let i = 0; i < hobby.length; i++) {
          const  element=hobby[i];
          element.checked =true;
        }
    }
 
    function reverse() {
        var hobby=document.getElementsByName('hobby');
        for (let i = 0; i < hobby.length; i++) {
            const  element=hobby[i];
            element.checked =false;
        }
    }
 
 
</script>

posted @ 2023-04-08 22:17 流浪猫老大阅读(141) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript的引入方式

· JSON对象

· js之事件监听

· JavaScript学习--事件监听

· JavaScript 事件监听

公告

昵称：流浪猫老大
园龄： 1年11个月
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

CenCen

JS事件监听

事件绑定

常见事件

鼠标单击事件onclick

其他

案例

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<input type="button" onclick="on()" value="按钮1">
	<script>
	function on(){
	alert( '我被点击了!')
	};
	< /script>

	<input type="button" id="btn" value="按钮2">
	<script>
	document.getElementById("btn").onclick=function(){
	alert('我被点击了! ');
	}
	</script>


	<body>
	<!--方式一：通过标签的属性来进行事件绑定-->
	<input type="button" name="btn1" value="事件绑定1" onclick="on()">
	<input type="button" name="btn2" value="事件绑定2">


	<!--事件绑定-->
	<script>
	function on() {
	alert("按钮1被点击了");
	}

	/通过DOM元素属性绑定/
	document.getElementById("btn2").onclick=function () {
	alert("按钮2被点击了");
	}


	</script>

	</body>


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>JS常见事件</title>
	</head>
	<body onload="load()">

	<form action="" style="text-align: center" onsubmit="subfn()">
	<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

	<input id="b1" type="submit" value="提交">

	<input id="b2" type="button" value="单击事件" onclick="fn1()">

	</form>
	<br><br><br>

	<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
	<tr align="center">
	<th>学号</th>
	<th>姓名</th>
	<th>分数</th>
	<th>评语</th>
	</tr>
	<tr align="center">
	<td>001</td>
	<td>张三女</td>
	<td>90</td>
	<td>很优秀</td>
	</tr>

	<tr align="center">
	<td>002</td>
	<td>李四</td>
	<td>92</td>
	<td>优秀</td>
	</tr>
	</table>

	<script>
	//onload :页面/元素加载完成后触发
	function load() {
	console.log("页面加载完成...");
	}
	//onclick : 鼠标点击事件
	function fn1() {
	console.log("我被点击了...");
	}

	//onblur : 失去焦点事件
	function bfn() {
	console.log("失去焦点");
	}

	//onfocus : 元素获得焦点
	function ffn() {
	console.log("获得焦点");
	}

	//onkeydown : 某个键盘的键被按下
	function kfn() {
	console.log("键盘被按下了");
	}

	//onmouseover: 鼠标移动到元素之上
	function over() {
	console.log("鼠标移入了");
	}

	//onmouseout: 鼠标移除某元素
	function out() {
	console.log("鼠标移入了");
	}

	//onsubmit : 表单提交事件,作用在表单上
	function subfn() {
	alert("表单被提交了...");
	}


	</script>

	</body>
	</html>


	<script>
	//1.点击"点亮"按钮，点亮灯泡；熄灭按钮，熄灭灯泡
	function on() {
	//获取img元素
	var img = document.getElementById('light');
	//修改src
	img.src="../../img/on.gif";
	}

	function off() {
	//获取img元素
	var img = document.getElementById('light');
	//修改src
	img.src="../../img/off.gif";
	}

	// 2.输入框聚焦变成小写，离焦转大写
	function lower() {//小写
	var name = document.getElementById('name');
	name.value= name.value.toLowerCase();
	}
	function upper() {//大写
	var name = document.getElementById('name');
	name.value= name.value.toUpperCase();
	}

	//3.全选：所有复选框选中；反选：所有复选框未选中

	function checkAll() {
	var hobby=document.getElementsByName('hobby');
	for (let i = 0; i < hobby.length; i++) {
	const element=hobby[i];
	element.checked =true;
	}
	}

	function reverse() {
	var hobby=document.getElementsByName('hobby');
	for (let i = 0; i < hobby.length; i++) {
	const element=hobby[i];
	element.checked =false;
	}
	}


	</script>