37、JavaScript 件对象和事件对象属性

事件对象

事件绑定“元素节点.on+事件类型=匿名函数

注:系统会在事件绑定一旦完成,生成一个事件对象

普通函数:声明->调用->执行。

function fn(){
   
     
    console.log(1)
}
fn()

事件处理函数:

var obtn=document.getElementsByTagName('button')[0]
obtn.onclick=function(){


    console.log('事件处理函数')
}

注:触发事件的时候,系统会自动去调用事件绑定的函数。将事件对象当作第一个参数传入

获取这个事件对象有两种方法:一种是利用argument[0]伪数组获取
 
另外一种是:直接在定义事件处理函数时,就把形参定义好。 ( 因为实参只有在函数调用的时候才会传入,所以程序员无法给函数传参,只有系统才能够给函数进行传参。) 就好比系统调用函数做的事情就是 fn(事件对象),所以我们定义的时候就可以function fn(event){} event就是事件对象。

注意:这种方法IE8以下不兼容。但是IE8有另一种方法:window.event
形参:  
window.event
 
每次事件绑定完成后返回的事件对象都是不同的,即使调用的都是window.event
 

事件对象属性

button 的属性

格式:事件对象.button
返回值:点击鼠标左键:返回0 点击鼠标滚轮:返回1 点击鼠标右键:返回2

 

获取鼠标位置的属性(以下三者的区别在于:原点位置不一样)(x轴以右为正,y轴向下为正)

clientX、clientY:
格式:事件对象.clientX、事件对象.clientY
返回值:以可视窗口左上角为原点,返回鼠标坐标点(不带单位)

pageX、pageY:
返回值:整个页面的左上角为原点,返回鼠标坐标点 (不带单位)

screenX、screenY:
返回值:整个电脑屏幕左上角为原点,返回鼠标坐标点 (不带单位)

offetX、offsetY
返回值:点击元素的左上角为原点,返回鼠标坐标点 (不带单位)

案例:跟随鼠标移动的提示框
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
   
     
				margin: 0;
				padding: 0;
			}
			.main div{
   
     
				margin: 200px;
				font-size: 50px;
			}
			.main p{
   
     
				display: none;
				position: absolute;
				font-size: 20px;
				width: 200px;
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="html">
				<a href="">HTML</a>
				<p>
					HTML的全称为超文本标记语言,是一种标记语言。
					它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
					HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]
				</p>
			</div>
			<div class="css">
				<a href="">CSS</a>
				<p>
					CSS
					层叠样式表(英文全称:
					Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)
					或XML(标准通用标记语言的一个子集)等文件样式的计算机语言
					。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
				</p>
			</div>
			<div class="javascript">
				<a href="">JavaScript</a>
				<p>
					avaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
					虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript
					基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格
				</p>
			</div>
		</div>
		<script type="text/javascript">
			var omain=document.getElementsByClassName('main')[0]
			var aA=omain.getElementsByTagName('a')
			var aP=omain.getElementsByTagName('p')
			for(var i=0;i<aA.length;i++){
   
     
				aA[i].index=i
				aA[i].onmousemove=function(event){
   
     
					console.log(event.pageY,event.pageX)
					for(var j=0;j<aP.length;j++){
   
     
						aP[j].style.display='none'
					}
					aP[this.index].style.display='block'
					aP[this.index].style.top=event.pageY+10+'px'
					aP[this.index].style.left=event.pageX+10+'px'
					
				}
				aA[i].onmouseleave=function(event){
   
     
					for(var j=0;j<aP.length;j++){
   
     
						aP[j].style.display='none'
					}
				}
			}
		</script>
	</body>
</html>

鼠标键+摁键属性:

shifitKey altKey ctrlKey metaKey

shifitKey 按下shifit键为true,默认为false

altKey 按下alt键为true,默认为false

ctrlKey 按下ctrl键为true,默认为false

metaKey window系统 按下window(开始键)为true,mac摁下comman键 为true
 
应用:可以和其它功能组合:形成快捷键

键盘键属性:

keyCode 键码
功能:返回键盘摁键 键码
返回值:键码:字母都是大写ASIIC码值,其他键都是一一对应的ASIIC码

which
功能:返回键盘摁键 键码
返回值:键码:字母都是大写ASIIC码值,其他键都是一一对应的ASIIC码

charCode字符码(仅在keypress下支持)
返回值:除了keypress事件处理函数触发输出的charCode代表字符码。其他事件处理函数触发的输出的charCode都是0
 
keydown、keyup事件类型触发事件处理函数输出的键码都是不区分字母大小的,但是keypress事件类型触发事件处理函数输出的键码都是区分字母大小的

触发/目标对象属性

target:(IE8以下不兼容)

功能:找到触发事件发生的目标对象

返回值:触发事件发生的目标对象

window.event.srcElement (IE8以下兼容)
 
IE7版本
 
this指向当前函数的主人,target指向引起事件发生的主人。以上面的例子来说,点击事件最开始是由我点击了 第一个li引起的,但是li层级比ul高,当我点击li的时候,同时因为事件冒泡,ul也发生了点击事件。所以事件触发了,而目标对象是li。

阻止事件冒泡属性:
cancleBubble=true
 
stopProgapation()
 
cancleBubble=true和stopPropagetion()这两个方法浏览器比较高的版本兼容,但是在低版本的情况下也存在不兼容现象。
实现跨浏览器兼容:

function stopBubble(e){
   
     
			
				if(e.stopPropagation){
   
     
					e.stopPropagation()
				}else{
   
     
					e.cancelBubble=true;
				}
			}

 
案例:

精灵移动(图片跟随鼠标移动):
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
   
     
				margin: 0;
				padding: 0;
			}
			body,html{
   
     
				height: 100%;
				width: 100px%;
				background-color:000000;
				overflow: hidden;
			}
			img{
   
     
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img id="imag" src="2700.gif_wh860.gif" style="width: 100px;height: 100px;">
		<script type="text/javascript">
			var oIm=document.getElementById('imag')
			document.onmousemove=function(ev){
   
     
				var e=ev?ev:window.event;
				oIm.style.top=e.clientY+10+'px';
				oIm.style.left=e.clientX+10+'px'
				if(e.clientX>(document.body.offsetWidth-100)){
   
     
					console.log(e.clientX,document.body.offsetWidth-100)
					oIm.style.left=document.body.offsetWidth-100+'px'
				}
				if(e.clientX<0){
   
     
					oIm.style.left=0+'px'
				}
			}
		</script>
	</body>
</html>

跟随鼠标移动形成一串连起来的点
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
   
     
				position: absolute;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var ali = document.getElementsByTagName('li')
			document.onmousemove = function(ev) {
   
     
				var e = ev ? ev : window.event;
				/* 每一次移动,都让后一个替代前一个的位置 */
				for (var i = ali.length-1; i>0; i--) {
   
     
					ali[i].style.left = ali[i-1].offsetLeft + 'px';
					ali[i].style.top = ali[i-1].offsetTop + 'px';
				}
				
				ali[0].style.left=e.clientX+'px'
				ali[0].style.top=e.clientY+'px'

			}
		</script>
	</body>
</html>

阻止默认行为属性:
preventDefault() (IE8以下不兼容含IE8 谷歌火狐都可)
window.event.returnValue=flase (IE8以下兼容IE8以上不行 谷歌火狐都可)
方式一:

案例:设置右键菜单:

/* 关闭右键菜单 */
			document.oncontextmenu=function(){
   
     
				return false
			}

 
案例:阻止点击 a标签跳转

//阻止a标签跳转
a元素节点.onclick=function(){
   
     
					return false
				}

 
comfirm 点击确定返回true 点击取消返回false

以上两种阻止默认行为的方式有一个缺点就是:因为执行程序遇到return就会结束运行,那么后面的程序就会执行不到。

方式二:(适合阻止a链接跳转。但是不适合右键菜单)
 
案例:拖拽
原理:当鼠标摁下元素时,触发的时元素的mousedown事件处理函数,与其同时,应该触发窗口的移动mousemove事件,这样即使在被拖拽的元素之外,也能够捕获到坐标。当鼠标抬起时,可能鼠标不在被拖拽元素的内部了,因此要将鼠标抬起的mouseup处理函数绑定给浏览器窗口,并且同时让鼠标移动失效,因为我们给窗口的绑定的鼠标移动,所以只需要将窗口的移动事件处理函数置为空字符串即可。
 
优化:解决出界