JAVA WEB开发技术随堂笔记函数事件处理程序

张时贰

已于 2022-05-21 00:03:51 修改

阅读量1.5k

点赞数

分类专栏： JAVA WEB开发技术文章标签：前端 web javascript html

于 2022-03-24 23:13:03 首次发布

本文链接：https://blog.csdn.net/qq_49488584/article/details/123724351

版权

JAVA WEB开发技术专栏收录该内容

19 篇文章 4 订阅

订阅专栏

🌴 2022.3.17 早十

文章目录

前言

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏传送门
💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
📽本节主要内容：函数，事件处理程序的调用及使用

3.4 函数

3.4.1 函数的定义

🚀 格式

function functionName(parameters) {
  	执行的代码
    ........
    [return expression;]
}

🚀 举例

编写函数，根据出生日期yyyy-mm-dd，计算年龄

function getAge(birthdy) {
    var now = new Date();		//获取当前日期
    var year0 = now.getYear();	//获取当前年份
    var month0 = now.getMonth();//获取当前月份
    var year1 = birthday.getYear();		//获取出生日期
    var month1 = birthday.getMonth();	//获取出生年份
    var age = month0 >= month1 ? year0 - year1 : year0 - year1 - 1;
    return age;
}
var d = new Date('2001-3-17');
var age = getAge(d);
console.log(age);

3.4.2 函数的调用

编写函数实现输出

大学排名

清华

2.北大

复旦

4.交大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>大学排名</h1>
		<ol>
			<li>清华</li>
			<li>北大</li>
			<li>复旦</li>
			<li>交大</li>
		</ol>
	</body>
	<script>
		function fun() {
			var liList = document.getElementsByTagName('li')
			for (var i = 0; i < liList.length; i++) {
				liList[i].style.marginLeft = (i + 1) + "rem"
			}
		}
		window.onload = function() {
			fun()
		}
	</script>
</html>

3.4.3 匿名函数

没有函数名，只需使用一次的函数可以定义为匿名函数

🚀 格式

function(parameters) {
  	执行的代码
    ........
}

🚀 调用

放进一个变量里，这个变量就相当于一个函数名了。没有名字的匿名函数，变成有“名”函数了

let  myFun = function( a,b ){
    console.info( a+b);
};
myFun( 10,30 );

干脆不要名字，直接执行。这么做可以在内容形成局部变量和局部函数，防止全局污染

(匿名函数)();

(匿名函数() );

(function(a,b){
    console.info( a+b );
})(10,30);
 
(function(a,b){
    console.info( a+b );
}(10,30));

🚀 实践

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #myDiv {
                background-color: #FF8888;
                height: 6rem;
                width: 8rem;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="myDiv" onclick="fun()"></div>
        <button type="button" onclick="fun()">按钮</button>
    </body>
    <script>
        var n = 1
        var timer
        var flag=true
        var f=true
        function fun(){
            if(flag)
                clearTimer()
            else
                setTimer()
        }

        function clearTimer(){
            clearInterval(timer)
            flag=false
        }

        window.onload = setTimer;
        function setTimer() {
            timer=setInterval(function() {
                var div = document.getElementById('myDiv')
                if(n<0||(n+8)*16>window.innerWidth){
                    f=!f
                }

                if(f){
                    n=n+0.1
                }
                else{
                    n=n-0.1
                }

                div.style.left = n + "rem"
            }, 1)
            flag=true
        }
    </script>
</html>

3.5 事件和事件处理程序

3.5.1 什么是事件和事件处理程序

JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload（载入）事件、当用户单击按钮时将触发按钮的onclick事件等
事件处理程序则是用于响应某个事件而执行的处理程序
事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理

3.5.2 JavaScript的常用事件

🚀 鼠标事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄
onmousedown	鼠标按钮被按下
onmouseenter	当鼠标指针移动到元素上时触发
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

示例：为按钮添加事件，点击按钮在页面中增加div，激活div可以使其随鼠标移动

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				position: absolute;
				top: 4rem;
				left: 2rem;
				background-color: #888888;
				height: 5rem;
				width: 5rem;
				line-height: 2rem;
				text-align: center;
				color: aquamarine;
			}

			div.active {
				background-color: #ff8888;
			}
		</style>
	</head>
	<body>
		<p id="my-p"></p>
		<!-- 创建一个按钮,每点击一次创建一个div -->
		<button type="button" id="btn" onclick="">按钮</button>
	</body>
	<script>
		// 获取按钮
		var btn = document.getElementById('btn')
		// onclik事件，点击按钮创建div元素
		btn.onclick = function() {
			var div = document.createElement('div')
			div.onclick = function() {
				changeDiv(this)
			}
			document.body.insertBefore(div, btn)	//在btn之前插入div
		}

		function changeDiv(ele) {
			var className = ele.className	//获取类名，className = active 就置空，当前点击的div为active
			if (className == 'active') {
				ele.className = ''
			} else {
				var activeDivs = document.getElementsByClassName('active')
				for (var i = 0; i < activeDivs.length; i++) {
					activeDivs[i].className = ''
				}
				ele.className = 'active'
			}
		}

		document.onmousemove = function(event) {
			var activeDiv = document.getElementsByClassName('active')
			//getElement返回值是数组，如果当前数组不为空且长度大于0
			if (activeDiv && activeDiv.length > 0) {
				activeDiv = activeDiv[0]
				activeDiv.style.top = event.clientY + 'px'
				activeDiv.style.left = event.clientX + 'px'
				activeDiv.innerHTML = event.clientX + ',' + event.clientY
			}
		}
	</script>
</html>

🚀 键盘事件

属性	描述
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开

按下键盘，屏幕显示按键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="my-p" ></p>
	</body>
	<script>
		document.onkeypress = function(event) {
			console.log(event)
			var p = document.getElementById('my-p')
			p.innerHTML +=event.key
		}
	</script>
</html>

🚀 框架对象事件

属性	描述
onload	一张页面或一幅图像完成加载
onresize	窗口或框架被重新调整大小
onscroll	当文档被滚动时发生的事件
onunload	用户退出页面。 ( `<body>` 和 `<frameset>`)

🚀 表单事件

属性	描述
onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
onreset	表单重置时触发
onselect	用户选取文本时触发 ( `<input>` 和 `<textarea>`)
onsubmit	表单提交时触发

3.5.3 事件处理程序的调用

🚀 在JavaScript中

<div id="myDiv" style="width: 400px;height:300px;background-color:red ;">
</div>
<script type="text/javascript">
    var div = document.getElementById("myDiv");
    div.onclick = function(event){
        alert(event.type);
    }
</script>

🚀 在HTML中

<div id="myDiv" onclick="divClick(event)"
     style="width: 400px;height:300px;background-color:red ;">
</div>
<script type="text/javascript">
    function divClick(event){
        alert(event.type);
    }
</script>