JavaScript第二章:函数与事件

BAY1394

于 2019-11-13 20:56:24 发布

阅读量275

点赞数

分类专栏： # javascript

本文链接：https://blog.csdn.net/BAY1394/article/details/103045200

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript自定义函数
JavaScript系统函数
JavaScript 事件
- 两种事件与处理程序绑定的方法
- - 方法一:`在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码`
  - 方法二：`可以直接在 JavaScript 代码中设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码`
JavaScript 的常用事件

JavaScript自定义函数

函数的定义

函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码。
函数包括自定义函数和系统函数
function 函数名(形式参数 1, 形式参数 2,…, 形式参数 n) {
	语句
}

求一个面积的函数

function getArea(width,height){
	var result = width * height;
	document.write('长方形的面积是：'+result);
}
/*调用方法*/
<script>
	getArea(4,5);
</script>

🐬`函数的参数`

函数参数作用：调用函数时将数据传递给被调函数的方式
JavaScript中函数参数的特殊性：
1. 函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的
2. 不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得
在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数

例如：

<script>
	function getTotal(){
    	document.writeln(arguments.length);
  	}
  	getTotal(43,3434,34,3,43,43,343,232);
</script>

输出：
8

在这里getTotal()里面的所有参数都被当成了arguments的数组元素

匿名函数

语法一 😆

(function (形式参数){
		语句
		})(实际参数);

语法二 😆

var  变量 =（function （形式参数列表）{
  语句
} ）;
变量（实际参数列表）;

匿名函数的使用

使用一
 <script type="text/javascript">
      // 调用匿名的函数
      (function(width,height){
        // 输出长方形的面积
        document.write(width*height);
      })(3,4);
    </script>

使用二
	<script type="text/javascript">
	    // 定义函数
	    var area=function(width,height) {
	      document.write(width*height);
	    };
	  </script>
	  <h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
	    <script type="text/javascript">
	      // 调用函数
	      area(3,4);
	    </script>
	  </h1>

JavaScript系统函数

parseInt(string) parseFloat(string) isNaN(string) eval(expression)

JavaScript 事件

💄

JavaScript 是基于对象、采用事件驱动的脚本语言
- 事件：用户使用鼠标或键盘在浏览器窗口或页面元素上执行的操作
- 事件源：产生事件的元素
- 事件处理程序：对事件进行处理的程序或函数
- 事件驱动：将一段程序代码与某个事件源上发生的事件进行绑定，当触发此事件，浏览器就会自动执行与之绑定的程序代码

两种事件与处理程序绑定的方法

方法一:`在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码`

<script>
	function changeSize(){
		var obj = document.getElementById('text');
		obj.style.fontSize = "30px";
	}
</script>
<p onclick = 'changeSize()'>这里是事件绑定</p>

方法二：`可以直接在 JavaScript 代码中设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码`

<script>
	function changeSize(){
		var obj = document.getElementById('text');
		obj.style.fontSize = "20px";
	}
	document.getElementById('text').onclick = changeSize;
</script>

JavaScript 的常用事件

鼠标事件
onclick事件

<script>
	document.querySelector('button').onclick = function(){
		alert('按钮点击事件');
}
</script>

onmouseover 和 onmouseout事件

<script>
	<p onmouseover='onOver()'></p> 
</script>

其他事件
onblur事件

	<body>
		  <input type="text" onblur="blur_1()">
	</body>
		<script>
		  	var input = document.querySelector('input');
		  		function blur_1() {
				    input.value = '失去焦点';
		  }
		</script>

结果：

表单事件

💍单击表单元素的“提交按钮”会触发form标签的 onsubmit事件，浏览器对这个事件的默认处理方式是提交数据给 action 属性指定的页面进行处理

👣如果要阻止提交数据到指定的页面，就需要编写一个事件处理程序来改变浏览器对form标签的 onsubmit事件的默认处理方式

BAY1394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript第二章:函数与事件

目录JavaScript自定义函数函数的定义:dolphin:`函数的参数`匿名函数匿名函数的使用JavaScript系统函数JavaScript 事件两种事件与处理程序绑定的方法方法一:`在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码`方法二：`可以直接在 JavaScript 代码中设置元素对象的事件属性，让事件属性值等于处理该...
复制链接

扫一扫