web前端学习笔记27-事件对象

一、事件对象

在触发事件的时候,与事件相关的信息存储对象就是事件对象,事件对象在不同的浏览器中体现方式不同。
【IE及其他浏览器】事件对象就是window子对象之一,可通过window.event或者event直接访问事件对象
【Firefox浏览器】事件对象是以参数的形式传入事件函数的形参当中,接收之后才可以使用
事件对象的兼容性处理(函数中使用)

var e=window.event?window.event:evt;
var e=window.event || evr;

事件对象的成员: 事件对象可划分为键盘事件对象鼠标事件对象


<html>
	<head>
		<meta charset="utf-8">
		<title>事件对象title>
		<style>
			div{
				padding: 50px;
			}
			#red{
				background: red;
			}
		style>
	head>
	<body>
		
		<div>
			<div id="red">div>
		div>
		<script>
			// 事件对象的获取
			var red=document.getElementById('red');
			// 事件函数
			
			/*
				// IE浏览器-------------------------
				function func(){
					console.log(window.event);
				}
				red.addEventListener('click',func,false);
				// 火狐浏览器,事件对象以形参方式传入-------
				function funchh(evt){
					console.log(evt);
				}
				red.addEventListener('click',funchh,false);
			*/
		   
			// 解决兼容性问题
			function funcjr(evt){
				var e=window.event?window.event:evt;
				// 或者:
				/*
					if(window.event){
						var e=window.event;
					}else{
						var e=evt;
					}
				*/
				console.log(e);
			}
			red.addEventListener('click',funcjr,false);
		script>
	body>
html>

二、事件对象的成员属性

关键字 释义
altKey 检测是否按下alt功能键,按下true,没按false
shiftKey 检测是否按下shift功能键,按下true,没按false
ctrlKey 检测是否按下ctrl功能键,按下true,没按false
keyCode 返回键盘按键的ASCII码
bubbles 事件是否可以冒泡传播,true冒泡,false不冒泡
cancelBubble 是否取消冒泡传播,true不冒泡,false冒泡
stopPropagation() 取消事件的传播方式(w3c)
clinetX 返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标 ★
clinetY 返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的垂直坐标 ★
screenX 返回鼠标相对于屏幕左侧的水平距离
screenY 返回鼠标相对于屏幕顶部的垂直距离
pageX 相当于clinetX,非IE专用
pageY 相当于clinetY,非IE专用
offsetX 返回鼠标相对于触发事件的元素的水平坐标 ★
offsetY 返回鼠标相对于触发事件的元素的垂直坐标 ★
srcElement 返回触发事件的元素(IE) target属性也表示同样的意义(标准)
toElement 仅针对于mouseover和mouseout事件有效,返回移入鼠标的元素
type 返回发生事件的类型名称,没有on的类型字符串
returnValue 属性值设为false时,可以取消发生事件的源元素的默认动作(IE)
preventDefault() 取消浏览器的默认操作(W3C)

<html>
	<head>
		<meta charset="utf-8">
		<title>事件对象title>
		<style>
			#red{
				background: red;
			}
			#txt{
				width: 600px;
				height: 200px;
				font-size: 20px;
			}
			#orange{
				background: orange;
			}
			#yellow{
				background: yellow;
			}
			#green{
				background: green;
			}
			#cyan{
				background: cyan;
			}
			#blue{
				background: blue;
			}
			#purple{
				background: purple;
			}
		style>
	head>
	<body>
		
		<div>
			<div id="red">div>
		div>
		
		<textarea id="txt">textarea>
		
		<div id="red" onclick="show(this)">
			<div id="orange" onclick="show(this)">
				<div id="yellow" onclick="show(this)">
					<div id="green" onclick="show(this)">
						<div id="cyan" onclick="show(this)">
							<div id="blue" onclick="show(this)">
								<div id="purple" onclick="show(this)">div>
							div>
						div>
					div>
				div>
			div>
		div>
		
		<script>
			// 事件对象成员属性
			// 键盘事件对象
			var txt=document.getElementById('txt');
			txt.onkeyup=function(){
				console.log(window.event);
			}
			// 阻止冒泡 cancelBubble  stopPropagation
			function show(element1){  //element接收this参数
				// cancelBubble 使用事件对象阻止冒泡(IE早期,现在浏览器都支持)
				window.event.cancelBubble=true;
				// 也可以使用stopPropagation (w3c早期,现在浏览器都支持)
				// window.event.stopPropagation();
				console.log(element1.id);
			}
		script>
	body>
html>

你可能感兴趣的:(web前端学习,javascript,js,html5)