JavaScript第八课

最新推荐文章于 2024-09-22 11:17:00 发布

Ignorant.946

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量290

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_73654870/article/details/127104451

版权

JavaScript的事件极其应用

我们先来了解事件和事件处理的概述。
事件是页面上的某种操作，事件的源头来自用户。当用户按下鼠标左键或者在页面上移功鼠标时，便产生了鼠标事件:当用户按下健盘上的某个键时，就产生了健意事件，当河览器的窗口被加载或窗口关闭时，就产生了窗口事件:提交个表单，就产生按钮事件，等等.所有的这些事件校得览器感知并捕获。除鼠标事件和键盘事件外，大多数的浏览器也支持类似onrsire和onloaod这样的事件，前者是改变当前活动窗口的大小时触发，后者是载入文档完成后触发。
与Java事件一样，JanaScipi中的事件也是注册事件，页面的某个组件注册了某种事件，并且与该事件绑定了相应的事件处理程序。一且浏览器捕获到与这个组件注册的事件产生，就自动触发绑定的事件处理程序，看起来，浏览器很智能，它无时无刻不在感知和捕获页面事件，但是，它只对注册过的事件感兴趣。所谓事件处理，其实就是一-段JavaScript代码的执行过程，它总是与页面中的某个组件相关联。
在JavaScript中，事件名称由事件类型外加一个on前缀构成，例如，onclick 就是“单击”事件。大多数事件通过名称就可以猜出其含义，如onmousedown、ondblelick 等，但也有少数事件的名字不易理解，如onblur表示一个元素失去焦点时触发的事件。事件的注册是指把事件的名称作为页面中某个组件的属性，例如，表单的按钮事件的注册使用<inputtypec-"button" valuc ”确定”onclick-"doCheck0"> 来实现，当按钮被单击旷个调用doCheck0函数，执行函数中的代码。
接下来是事件的绑定，我们一般会采用两种方法进行绑定。1.绑定到页面元素属性。

其实就是在标签里面直接加入事件，例如：

<input type="button" name="" id="btn" value="" onclick = "one()"/>
		<script type="text/javascript">
			function one (){

			}
		</script>

第二种则是绑定到对象属性：

可以先获取到标签然后给标签对象绑定事件，例如：

<input type="button" name="" id="btn" value="" />
		<script type="text/javascript">
			document.getElementById("btn").onclick = function(){
				
			}
		</script>

接下来看我们表单里面的常用事件。

复选框对象：

复选框对象的常用属性和事件
属性	checked	获取或设置对象是否被选中：代码中可以通过改变该属性来设置复选框的状态
属性	value	获取或设置复选框value属性的值
事件	onblur	失去焦点时触发
	onfocus	获得焦点时触发
	onclick	鼠标单击时触发

接下来让我们看看这些实际的应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="selectorAll" />全选/全不选
		<ul class="shop">
			<li><input type="checkbox" />苹果</li>
			<li><input type="checkbox" />火龙果</li>
			<li><input type="checkbox" />阳光玫瑰</li>
			<li><input type="checkbox" />黄金梨</li>
		</ul>
		<script type="text/javascript">
			document.getElementById("selectorAll").onclick = function(){
				var isChecked = this.checked
				var cbs = document.querySelectorAll(".shop input")
				for (var i = 0;i<cbs.length;i++) {
					cbs[i].checked = isChecked
				}
			}
			
		</script>
	</body>
</html>