Event1-事件

客官°小女子只卖身不卖艺 2022-07-15 12:20 20阅读 0赞

**焦点事件**

焦点:使浏览器能够区分用户输入的对象，当一个元素有焦点的时候那么它就可以接受用的输入操作

我们可以通过一些方式可以给元素设置焦点

1.点击

2.tab

3.js

不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

onfocus:当元素获取到焦点的时候触发

onblur : 当元素失去焦点的时候触发

obj.focus();给指定的元素设置焦点

obj.blur();取消指定元素的焦点

obj.select();选择指定元素的里面的文本内容

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
    	
    	var oText = document.getElementById('text1');
    	
    	//onfocus : 当元素获取到焦点的时候触发
    	oText.onfocus = function() {
    		
    		if ( this.value == '请输入内容' ) {
    			this.value = '';
    		}
    		
    	}
    	
    	//onblur : 当元素失去焦点的时候触发
    	oText.onblur = function() {
    		
    		if ( this.value == '' ) {
    			this.value = '请输入内容';
    		}
    		
    	}
    	
    	/*
    		obj.focus() 给指定的元素设置焦点
    		obj.blur() 取消指定元素的焦点
    		obj.select() 选择指定元素里面的文本内容
    	*/
    	oText.focus();
    	
    	var oBtn = document.getElementById('btn');
    	
    	oBtn.onclick = function() {
    		
    		oText.select();
    		
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<input type="text" id="text1" value="请输入内容" />
        <input type="button" value="全选" id="btn" />
    </body>
    </html>

**event事件对象**   
 当一个事件发生的时候，和当前对象发生的这个事件有关的详细信息都会临时保存到一个指定地方-event对象供我们需要的时候使用 ( 类似于黑匣子用来记录信息的)  
    
事件对象必须在一个事件调用的函数里面使用才有内容  
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候   
  兼容 :  
  IE /chrome ：event是一个内置全局对象  
  ff :标准下: 事件对象是通过事件函数的第一个参数传入  
  如果一个函数是被事件调用的那么这个函数定义的第一个参数就是事件对象

function fn1(ev){
    	var ev = ev||event;
    	alert(ev.clientX);
    }
    document.onclick = fn1;

clientX/Y:当一个事件发生的时候，鼠标到页面可视区的距离  
  onmousemove:当鼠标在元素上面移动的时候触发  
  触发的频率不是像素而是间隔时间

**跟随鼠标移动的div**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height:100px; background: red; position: absolute;} </style> <script> window.onload = function() { //onmousemove : 当鼠标在一个元素上面移动的触发 //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次 var i = 0; var oDiv = document.getElementById('div1'); document.onmousemove = function(ev) { //document.title = i++; var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px'; } } </script> </head> <body style="height: 2000px;"> <div id="div1"></div> </body> </html>

**事件冒泡**

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

阻止冒泡：当前要组织冒泡的事件函数中调用ev.cancelBubble=true;

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    div {padding: 40px;}
    #div1 {background:red}
    #div2 {background:green}
    #div3 {background:blue; position: absolute; top: 300px;}
    </style>
    <script>
    window.onload = function() {
    	var oDiv1 = document.getElementById('div1');
    	var oDiv2 = document.getElementById('div2');
    	var oDiv3 = document.getElementById('div3');
    	
    	function fn1() {
    		alert( this.id );
    	}
    	
    	//oDiv1.onclick = fn1;  给**加事件，给元素加事件处理函数
    	//事件函数绑定
    	oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1
    	//oDiv2.onclick = fn1;
    	oDiv3.onclick = fn1;
    	
    	//我在马路边捡到一分钱，把他交个警察叔叔
    	/*我.on马路边捡到一分钱 = function() {
    		把他交个警察叔叔
    	}*/
    	
    }
    </script>
    </head>
    
    <body>
         <div id="div1">
        	<div id="div2">
            	<div id="div3"></div>
            </div>
        </div>
    </body>
    </html>

**事件冒泡理解**

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width:100px; height:200px; border: 1px solid red; display: none;}
    </style>
    <script>
    window.onload = function() {
    	
    	/*
    	阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
    	*/
    	
    	var oBtn = document.getElementById('btn');
    	var oDiv = document.getElementById('div1');
    	
    	oBtn.onclick = function(ev) {
    		var ev = ev||event;
    		
    		ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡
    		
    		oDiv.style.display = 'block';
    	}
    	
    	/*oBtn.onmouseover = function(ev) {
    		var ev = ev || event;
    		
    		ev.cancelBubble = true;
    	}*/
    	
    	document.onclick = function() {
    		/*setTimeout(function() {
    			oDiv.style.display = 'none';
    		}, 1000);*/
    		
    		oDiv.style.display = 'none';
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<input type="button" value="按钮" id="btn" />
        <div id="div1"></div>
        
        <p>ppppp</p>
        <p>ppppp</p>
        <p>ppppp</p>
        <p>ppppp</p>
    </body>
    </html>

**侧边栏分享到**

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
    #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
    </style>
    <script>
    window.onload = function() {
    	
    	var oDiv = document.getElementById('div1');
    	
    	oDiv.onmouseover = function() {
    		this.style.left = '0px';
    	}
    	
    	oDiv.onmouseout = function() {
    		this.style.left = '-100px';
    	}
    	
    }
    </script>
    </head>
    
    <body>
    	<div id="div1">
        	<div id="div2">分享到</div>
        </div>
    </body>
    </html>

**事件绑定的第二种形式**

给一个对象绑定一个事件处理函数的第一种形式  
obj.onclick = fn;

function fn1() {
    	alert(this);
    }
    function fn2() {
    	alert(2);
    }
    
    document.onclick = fn1;
    document.onclick = fn2;	//会覆盖前面绑定fn1

给一个对象的同一个事件绑定多个不同的函数  
给一个元素绑定事件函数的第二种形式   
 ie：obj.attachEvent(事件名称，事件函数);  
1.没有捕获  
2.事件名称有on  
3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序  
4.this指向window  
标准：obj.addEventListener(事件名称，事件函数，是否捕获);  
1.有捕获  
2.事件名称没有on  
3.事件执行的顺序是正序  
4.this触发该事件的对象

document.attachEvent('onclick', function() {
    	fn1.call(document);
    });
    document.attachEvent('onclick', fn2);
    
    //是否捕获 : 默认是false    false:冒泡 true：捕获
    
    document.addEventListener('click', fn1, false);
    document.addEventListener('click', fn2, false);

**函数封装兼容**

**call方法**

call 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表