自学JavaScript的笔记（四）

最新推荐文章于 2024-04-29 11:39:56 发布

Mikeal_He

最新推荐文章于 2024-04-29 11:39:56 发布

阅读量124

点赞数

分类专栏： js 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44133394/article/details/88640391

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript

一.js事件机制学习：
解释：当我们的行为满足了一定条件后，会触发某事物的执行
作用：主要是结合js的函数来使

1.单双击事件
单机：onClick 当鼠标单机的时候会触发
双击：ondblClick 当鼠标双击的时候会触发
示例：

<script type="text/javascript">
          //单击事件
		function testOnclick(){
			alert("我是单机");
		}
		//双击事件
		function testOndbClick(){
			alert("我是双击");
		}
</script>
<body>
	<input type="button" name="" id="" value="测试单机" onClick="testOnclick();">
	<input type="button" name="" id="" value="测试双机" ondblClick="testOndbClick();">
</body>

2.鼠标事件
onmouseover事件当鼠标悬停在某个HTML元素上时触发
onmousemove事件当鼠标在某个HTML元素上移动时触发
onmouseout事件当鼠标在某个HTML元素上移出的时候触发
示例：

<script type="text/javascript">
	//鼠标事件
		function testOnmouseover(){
			alert("我是鼠标悬停事件")
		}
		function testOnmousemove(){
			alert("我是鼠标移动事件")
		}
		function testOnmouseout(){
			alert("我是鼠标移出事件")
		}
</script>

//这是对div的样式的修改
<style type="text/css">
		#show{
			width: 300px;
			height: 300px;
			border: solid 1px;	
		}
</style>
	
<body>
<div id="show" onMouseOver="testOnmouseover()" onMouseMove="testOnmousemove()" onMouseOut="testOnmouseout()">
</div>
</body>

3.键盘事件
onkeyup 当键盘在某个HTML元素上弹起时触发
onkeydown 当键盘在某个HTML元素上下压时触发
示例：

//键盘事件
<script type="text/javascript">
		function testOnkeyup(){
			alert("我是键盘弹起事件")
		}
		function testOnkeydown(){
			alert("我是键盘下压事件")
		}
</script>
<body>
键盘事件学习：
	     键盘弹起事件：<input type="text" onKeyUp="testOnkeyup()"><br>
	     键盘下压事件：<input type="text" onKeyDown="testOnkeydown()">
</body>

4.焦点事件
onfocus 当对某个HTML元素获取焦点时触发
onblur 当对某个HTML元素失去焦点时触发
示例：

<script type="text/javascript">
        function testOnfocus(){
			document.getElementById("show").innerHTML="哈哈"
		}
		function testOnblur(){
			alert("我失去了焦点")
		}
</script>
<body>
 焦点事件学习：<br>
	  获取焦点：<input type="text" onFocus="testOnfocus()">
	  失去焦点：<input type="text" onblur="testOnblur()">
</body>

5.页面加载事件
onload
一般加在body中
注意：
①js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性位所监听执行的函数
②js中的事件只有在当前HTML元素上有效
③一个html元素可以添加多个不同事件
④ 一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号隔开

6.给合适的HTML标签添加合适的事件
onChange事件 -----select下拉框
onload ----- body标签
单双击------用户进行点击动作的HTML元素
鼠标事件-------用户会进行鼠标移动操作
键盘事件----------用户会进行键盘操作的HTML元素

7.给HTML元素添加多个事件时，注意事件之间的冲突
例如：单击和双击

8.事件的阻断
当事件所监听的函数将返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能
true：则继续执行当前事件所在的HTML标签的功能
9.超链接调用js函数

<script type="text/javascript">
      //值改变事件
	function testOnchange(){
		alert("我被改变了")
	}
	//事件的阻断
	function testA(){
		alert("事件的阻断");
		return false;
	}
	//	超链接调用js函数
	function testHref(){
		alert("我是超链接调用")
	}
</script>

<body>
值改变事件：
<select onChange="testOnchange()">

<option value="">北京</option>
	<option value="">上海</option>
	<option value="">广州</option>
</select>

事件的阻断：<br>
<a href="http://www.baidu.com" onClick="return testA()">百度</a>

超链接调用js函数：<a href="javascript:testHref()">调用js函数</a>
</body>