JS中的相关事件

所谓的JS事件,我的理解就是当我们在页面上做某些操作,这些动作能够被程序监听到而做出某些改变。

表单内容改变事件

这个事件的意思就是当我们选择表单中的某个选项是能够被绑定在该事件上的对象监听到。

<select onchange="test()">
			<option value ="">--请选择学历--</option>
			<option value ="">弟弟</option>
			<option value ="">小学</option>
			<option value ="">中学</option>
		</select>

当做出选择时执行test函数,然后在通过在方法中传入event事件对象来获得选项的值。

表单事件

<form action="#" method="get" onsubmit="return isSubmit()" onreset="test()">
			用户名:<input type="text" name="username" id="" value="" />
			密码:<input type="password" name="username" id="" value="" />
			<input type="submit" name="" id="" value="提交" />
			<input type="reset" name="" id="" value="重置"  />
		</form>

当监听到提交按钮的动作时,会调用 isSubmit()函数,若函数返回值为true,则将数据发往action所示的网址后台,若为false则不发。
当监听到重置动作时执行test函数。

键盘事件

event事件

event 事件对象由浏览器创建,当事件发生时,可以传递给处理函数来使用

键盘值

键盘上的字母跟据ASK码表都有一个数字,我们可以通过监听函数并传入event事件来获得该事件中的按钮的值(event.keyCode)。

<input type="text" name="" id="bt" value="" onkeypress="isKeyPressed(event)" />
function isKeyPressed(event) {
alert(event.keyCode)
}

这里要注意的是辅助键比如Shift Ctrl和Alt键在记录它们的值时要么调用特有的方法要么要在其他键的辅助下才能实现。
还有记录键盘动作的函数除了isKeyPressed(按下键盘并抬起),还有其他的(键盘按下的时候和键盘抬起的时候)

节点对象

通过节点的层级关系,去找元素
节点类型:文本节点,属性节点,元素节点 父节点,子节点,兄弟节点

var allNodes = document.all; 获得所有的节点,
parentNode	获取当前元素的父节点。

childNodes	获取当前元素的所有下一级子元素。

firstChild	获取当前节点的第一个子节点。

lastChild	获取当前节点的最后一个子节点。

nextSibling	获取当前节点的下一个节点。(兄节点)

previousSibling	获取当前节点的上一个节点。(弟节点)

获取元素对象的属性
parentElement 获取当前元素的父元素对象(不会获取到空文本,或者注释)

firstElementChild 获取父元素的第一个标签对象(不会获取到空文本,或者注释)

lastElementChild 获取父亲元素的最后一个标签对象(不会获取到空文本,或者注释)

previousElementSibling; 获取上一个兄弟元素对象(不会获取到空文本,或者注释)

nextElementSibling 获取下一个兄弟元素对象(不会获取到空文本,或者注释)

事件冒泡

当元素有了嵌套关系后,我们点击了最里层的元素后,外层的事件也会触发。
如果说你不想要这种冒泡现象,那么我可以用事件对象里面的方法来阻止冒泡行为。

	<div id="div1" onclick="test1(event)">
			1
			<div id="div2" onclick="test2(event)">
				2
				<div id="div3" onclick="test3(event)">
					3
					<div id="div4" onclick="test4(event)">
						4
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
						function test4(e) {
							alert(4)
							// e.stopPropagation();
						}
		</script>

如上,当点击div4时程序在调用完test4方法后还会依此调用test3,test2,test1。想停止test3,则可以在test4方法中调用stopPropagation()方法。但它仅仅只能停止test3.

鼠标事件

鼠标监测的话这里有两队
鼠标按下和抬起: onmousedown onmouseup
which 可以获取鼠标 左中右三个键的编码 1 2 3 ,用event打点调用即可
鼠标悬浮
onmouseover onmouseout
onmouseenter onmouseleave
onmouseover
上面三队都可以检测鼠标的悬浮,但不同的是
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件中有在鼠标指针进入 div 元素时触发。
onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。

页面加载

window.onload=function(){ 
document.getElementById("hehe").style.color = "red";
			}

再页面加载完成之后才会执行该函数

阻止元素的默认行为

<a href="http://www.baidu.com" onclick="test(event)">这是一个连接</a>
		
		<form action="123.html" method="get" onsubmit="return tijao(event)">
			<input type="text" name="" id="" value=""/>
			<input type="submit" value="提交" onclick="ajaxTijao()"/>
		</form>

function  tijao(e){
				e.preventDefault()	通知浏览器不要执行与事件关联的默认动作。
			}

就是再监控对象时阻止对象的某些默认行为,像上面的默认跳转页面的行为将会被阻止

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
简单点的操作都在下面代码里

var stuJSON={'name':'张三','age':23,'sex':true};
			 //取数据:方式1:键找值
			 var name=stuJSON.name;
			 alert(name);
			 alert(stuJSON.age);
			 alert(stuJSON.sex);
			 //方式2:
			var name2=stuJSON['name'];
			alert(name2)
			alert("下面的")
			//如何遍历JSON对象
			for(key in stuJSON){
				alert(stuJSON[key]);
			}
				alert("下面的数组")
			//遍历数组 for in 
			var arr=["aaa","bbbb","cccc","dddd"];
			for(index in arr){
				alert(arr[index]);
			}

JSON对象和JSON字符串的互转

var obj = JSON.parse(str); //把JSON字符串解析成JSON对象
var jsonString=JSON.stringify(loginJSON); //把JSON对象变成JSON字符串
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值