• 11、事件(上)


    1、获取外联样式

                    window.onload = function(){
    				// 获取div的css样式
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.style); //object CSS2Properties
    				/*alert(oDiv.style.width);
    				alert(oDiv.style.backgroundColor);*/
    
    				/*alert(oDiv.style.color);
    				alert(oDiv.style.height);*/
    

    如果你想获取当前标签外联样式,通过具体的函数获取。

                    // alert(oDiv.currentStyle["color"]); //IE
    				// alert(getComputedStyle(oDiv)["color"]); //火狐和谷歌支持的
    

    浏览器兼容写法

    				/*
    					获取的是当前有效样式
    				*/
    				alert(getStyle(oDiv, "height"));
    			}
    
            	//获取当前样式
    			function getStyle(node, styleName){
    				if(node.currentStyle){
    					//IE
    					return node.currentStyle[styleName];//返回属性值
    				}else{
    					return getComputedStyle(node)[styleName];//返回属性值
    				}
    			}
    

    2、document.querySelector

    node.querySelector(参数);
    参数:字符串,选择器样式的字符串 #id .class
    返回值:只返回符合要求的++第一个节点++。

    document.querySelectorAll(参数);
    返回值:++肯定是数组++,数组里面装着++++所有符合条件的元素++++,就算选择是id。

    上述这两个方法,可以传参数,和你能写的css选择器的数量一致。

    			    window.onload = function(){
    				// var node = document.querySelector("#div1");
    
    				// var node = document.querySelector("li");
    
    				// var nodes = document.querySelectorAll("li");
    				// var nodes = document.querySelectorAll("#div1");
    				// var nodes = document.querySelectorAll(".box");
    				var nodes = document.querySelectorAll("ul li");
    
    
    				alert(nodes.length);
    
    				for(var i = 0; i < nodes.length; i++){
    					nodes[i].style.backgroundColor = "red";
    				}
    			}
    

    3、++innerHTML。outerHTML。innerText。nodeValue++

    innerHTML
    获取标签间的内容,包括子标签。

    文本1<strong>粗体文本</strong>文本2
    

    outerHTML
    除了包含innerHTML的全部内容外, 还包含对象标签本身。

    <div id="div1">文本1<strong>粗体文本</strong>文本2</div>
    

    innerText

    文本1粗体文本文本2 
    【注】只会获取该节点中 ,子节点的文本 纯文本,不包括子标签
    

    nodeValue

    元素节点   返回:null
    文本节点   返回:文本的内容
    
                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.innerHTML);
    				// oDiv.innerHTML = "<h1>h1</h1>";
    				// alert(oDiv.outerHTML);
    
    				// alert(oDiv.innerText);
    				// oDiv.innerText = "<h1>h1</h1>";
    
    				var nodes = oDiv.childNodes;
    
    				alert(nodes[0].nodeValue); //文本节点
    				nodes[0].nodeValue = "<h1>h1</h1>"
    				// alert(nodes[1].nodeValue); //元素节点
    			}
        <body>
    		<div id = "div1">文本1<strong>粗体文本</strong>文本2</div>
    	</body>
    

    4、认知事件

            <style>
    			#div1{
    				 100px;
    				height: 100px;
    				background-color: blue;
    				color: white
    			}
    		</style>
    		<script>
    

    事件:
    1、事件发生了
    2、针对事件,进行对应的操作

    在JS中有哪些事件?

    1、鼠标事件
    click 单击事件
    onclick 处理事件的函数。
    dblclick 双击 两次单击不能间隔太长
    mouseover 移入
    mouseout 移出
    mousemove 在某一个标签上移动,会触发
    mousedown 按下鼠标
    mouseup 抬起鼠标

    事件绑定格式:
    元素节点.on事件类型 = 函数

    2、键盘事件

    3、HTML事件

                    1、事件
    				2、事件处理的操作
    				【注】应该如何链接起来。
    				【注】事件绑定 = 事件 + 事件发生处理函数
    					1、内联模式
    					2、外联模式/脚本模式
    
                    window.onload = function(){
    				// 外联模式
    				/*
    					html
    					css
    	    【注】分模块,分文件的格式要求,一般写成外联的模式。
    				*/
    				var oDiv = document.getElementById('div1');
    				/*oDiv.onclick = function(){
    					alert("单击");
    				}*/
    				/*document.onclick = function(){
    					alert("触发");
    				}*/
    
    				/*oDiv.ondblclick = function(){
    					alert("双击");
    				}*/
    
    				/*oDiv.onmouseover = function(){
    					oDiv.style.backgroundColor = "red";
    				}
    				oDiv.onmouseout = function(){
    					oDiv.style.backgroundColor = "yellow";
    				}*/
    
    				//移动就执行
    				/*var i = 0;
    				oDiv.onmousemove = function(){
    					oDiv.innerHTML = i++;
    				}*/
    
    				oDiv.onmousedown = function(){
    					oDiv.innerHTML = "按下";
    				}
    
    				oDiv.onmouseup = function(){
    					oDiv.innerHTML = "抬起";
    				}
    			}
    		</script>
    
    	</head>
    	<body>
    		<!-- 内联 onclick = "要去执行js语句"; -->
    		<!-- <div id = "div1" onclick = "btnClick();"></div> -->
    		<div id = "div1">div</div>
    	</body>
    

    5、键盘事件

    keydown 按下键 按下任何键
    如果长按,会重复触发

    keyup 抬起键

    keypress 按下键 按下字符键有效,功能不触发
    如果长按,会重复触发

    事件绑定:
    1、输入,input textare
    2、window 全局

                window.onload = function(){
    				var i = 0;
    				/*window.onkeydown = function(){
    					// document.title = "按下";
    					document.title = i++;
    				}
    				window.onkeyup = function(){
    					document.title = "抬起";
    				}*/
    
    				window.onkeypress = function(){
    					// document.title = "按下";
    					document.title = i++;
    				}
    				window.onkeyup = function(){
    					document.title = "抬起";
    				}
    			}
    

    6、HTML事件

    <script>
    

    HTML事件
    1、window事件

    load 页面加载完成以后触发

    unload 页面解构的时候触发, IE兼容
    点击刷新,上一页面会解构
    window.onunload = function(){}

    scroll 页面滚动,会触发
    resize 页面大小发生变化会触发。

    2、表单事件 form input textarea

    blur 失去焦点

    focus 获取焦点

    change 文本发生改变,并失去焦点的时候触发

    select 当文本被选中的时候触发

    【注】表单事件,必须添加在form表单才能生效

                window.onload = function(){
    				// var i = 0;
    				/*window.onscroll = function(){
    					//页面滚动
    					document.title = i++;
    				}*/
    
    				/*window.onresize = function(){
    					document.title = i++;
    				}*/
    				var oInput = document.getElementById("input1");
    				/*oInput.onblur = function(){
    					oInput.value = "失去焦点";
    				}
    				oInput.onfocus = function(){
    					oInput.value = "获取焦点";
    				}*/
    				/*oInput.onchange = function(){
    					alert("改变了");
    				}*/
    				/*oInput.onselect = function(){
    					alert("被选中了");
    				}*/
    
    
    				var oForm = document.getElementById("form");
    				oForm.onsubmit = function(){
    					alert("当点击submit按钮触发")
    				}
    				oForm.onreset = function(){
    					alert("当点击reset按钮触发")
    				}
    			}
    		</script>
    	</head>
    	<body style = "height: 3000px">
    		
    	</body>
    	<input type="text" value = "文本" id = "input1" />
    	<form action="#" id = "form">
    		<input type="submit" />
    		<input type="reset" />
    	</form>
    

    7、事件对象

    事件绑定:
    元素节点/目标对象.on事件类型 = 函数
    1、目标对象
    2、on + 事件类型
    3、触发事件,要去执行的函数

    系统:当你把事件绑定绑定成功以后,会将上述三者融城一个对象,这个对象,叫做事件对象。

    获取事件对象:由系统,去调用事件处理函数的时候,当做第一个参数传入。

                document.onclick = function(event){
    				// alert(123);
    				// alert(arguments.length);
    				// alert(arguments[0]); //object MouseEvent
    
    
    				//访问事件对象
    				// alert(event);
    				/*
    					IE8以下不能,直接通过形参获取对象。
    						window.event
    				*/
    				/*
    					通过或运算的短路操作,进行浏览器兼容
    				*/
    				var e = event || window.event;
    				alert(e);
    			}
    

    短路操作:

            var res = 10 < 3 || alert(a);
    			alert(res);
    

    8、事件对象属性

    window.onload = function(){
    

    button属性(IE对于button的兼容也有问题)
    鼠标事件对象属性:
    0 左键
    1 滚轮
    2 右键

    clientX clientY
    【注】原点位置,可视区域html标签的左上角,可视区域页面的左上角。
    【注】不包含滚动出去的页面

    pageX pageY
    【注】包含滚动出去的页面,原点位置,html标签的左上角,页面的左上角。

    screenX screenY
    【注】原点位置,你电脑屏幕的左上角

                    document.onclick = function(event){
    					var e = event || window.event;
    					// alert(e.button);
    
    					alert(e.clientX + ", " + e.clientY);
    					// alert(e.screenX + ", " + e.screenY);
    					alert(e.pageX + ", " + e.pageY);
    				}
    
    			}
    

    9、坐标的实时显示

        <head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			#div1{
    				 500px;
    				height: 500px;
    				border: 1px solid black;
    				margin: 50px auto;
    				position: relative;
    			}
    			#span1{
    				position: absolute;
    				bottom: 10px;
    				left: 10px
    			}
    		</style>
    		<script src = "js/tool.js"></script>
    		<script>
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				var oSpan = document.getElementById("span1");
    				//获取div1的left top
    				// alert(getStyle(oDiv, "top"));
    
    				oDiv.onmousemove = function(event){
    					var e = event || window.event;
    					var X = e.clientX - oDiv.offsetLeft;
    					var Y = e.clientY - oDiv.offsetTop;
    					//实时的更新鼠标的坐标
    					oSpan.innerHTML = X + ", " + Y;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<span id = "span1">0, 0</span>
    		</div>
    	</body>
    

    10、offset系列

    offsetLeft,offsetTop可以理解为里面盒子外面盒子(有position的父元素,如果没有往上找)边框的距离

    offsetWidth,offsetHeight是元素的宽和高

                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    
    				/*
    				直接获取当前元素节点的样式
    					offsetLeft
    					offsetTop
    
    					offsetWidth
    					offsetHeight
    				*/
    				// alert(oDiv.offsetLeft);//获取节点oDiv左侧距离;
    				// alert(oDiv.offsetTop);//获取节点oDiv上侧距离;
    
    				// alert(typeof getStyle(oDiv, "width"));
    
    				
    				alert(typeof oDiv.offsetWidth);
    			}
    

    11、跟随鼠标的提示框

        <head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			a{
    				font-size: 30px;
    				margin: 30px;
    				display: inline-block;
    			}
    			#desc{
    				 600px;
    				height: 150px;
    				background-color: gray;
    				border: 1px solid black;
    				position: absolute;
    				display: none;
    				color: white;
    				font-size: 15px
    			}
    
    		</style>
    		<script>
    
    			var arr = ["孙悟空,本名卡卡罗特,日本漫画及改编动画《龙珠》系列的主角,是来自贝吉塔行星的赛亚人。小时候以“下级战士”的身份被送到地球。被武道家孙悟饭收养并取名为“孙悟空”。小时候失控变成大猩猩踩死悟饭后独自生活在深山。有一天结识少女...", "出生地:第7宇宙-贝吉塔行星简介:贝吉塔,日本动漫《龙珠》系列中的主要角色之一。是战斗民族赛亚人的王子,拥有极高的自尊心。过去贝吉塔行星被弗利萨破坏后(不知情,一直以为是被陨石撞击而毁灭。)以前在弗利萨军团那儿做事。初登场时是个侵略地球的反派角色,后被孙悟..", "小丸子是一名小学二年级的女生,她活泼,好动,懒惰,什么事情都拖到最后一刻才做,学习不认真,成绩平平,经常和姐姐斗气,爱幻想,做事没恒心……在小丸子...", "小学生木之本樱(丹下樱 配音)是一个平凡的女孩,有一个温柔的爸爸木之本藤隆(田中秀幸 配音)和一个体贴的好友大道寺知世(岩男润子 配音)。一天,在父"];
    
    
    
    			window.onload = function(){
    				var nodes = document.getElementsByTagName("a");
    				var oDesc = document.getElementById("desc");
    
    				for(var i = 0; i < nodes.length; i++){
    					//给每一个a标签添加下标
    					nodes[i].index = i;
    
    
    					nodes[i].onmouseover = function(event){
    						//1、让div显示  2、让div位置挪动到鼠标移入的位置
    
    						var e = event || window.event;
    						oDesc.style.display = "block";
    						oDesc.innerHTML = arr[this.index];
    						oDesc.style.left = e.clientX + 5 + "px";
    						oDesc.style.top = e.clientY + 5 + "px";
    					}
    					nodes[i].onmousemove = function(event){
    						var e = event || window.event;
    						oDesc.style.left = e.clientX + 5 + "px";
    						oDesc.style.top = e.clientY + 5 + "px";
    					}
    
    
    					nodes[i].onmouseout = function(){
    						//让div隐藏
    						oDesc.style.display = "none";
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<ul>
    			<li>
    				<a href="#">孙悟空</a>
    			</li>
    			<li>
    				<a href="#">贝吉塔</a>
    			</li>
    			<li>
    				<a href="#">樱桃小丸子</a>
    			</li>
    			<li>
    				<a href="#">百变小樱</a>
    			</li>
    		</ul>
    		<div id = "desc"></div>
    	</body>
    

    12、事件对象

    //传参

            function add(num1, num2){
    				alert(num1 + num2);
    			}
    
    			add(10, 20);
    
    			window.onload = function(){
    
    				//事件绑定完成
    				document.onclick = function(event){
    					alert(event);
    				}
    			}
    

    13、点击按钮输入按钮对应下标

            <script>
    			window.onload = function(){
    				var aBtns = document.getElementsByTagName("button");
    
    				/*
    					【注】这个for循环只是绑定事件。有几个button,就有几个onclick函数。
    				*/
    				for(var i = 0; i < aBtns.length; i++){
    					aBtns[i].index = i;
    					//绑定事件
    					aBtns[i].onclick = function(){
    						alert(this.index);
    					}
    				}
    
    			}
    		</script>
    	</head>
    	<body>
    		<button>111</button>
    		<!-- index = 0  onclick -->
    		<button>222</button>
    		<!-- index = 1  onclick-->
    		<button>333</button>
    		<!-- index = 2  onclick-->
    	</body>
    

    14、this变量

    【注】每一个函数,都有一个内置的变量叫做this。
    【注】this永远存储着,当前这个函数主人的地址。
    【注】仔细当前函数的主人是谁。看该函数调用的时候,前面是谁。

    如果当前函数,没有主人,统一this代表window对象。

                /*function show(){
    				alert(this);
    			}*/
    			// show(); //object Window
    
    			/*var xiaoming = {
    				name: "小明",
    				age: 40,
    				show: function(){
    					// alert(this);
    					// alert(xiaoming.name);
    					alert(this.name);
    				}
    			}
    
    			xiaoming.show();*/
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				oDiv.onclick = function(){
    					alert(this.tagName);
    				}
    			}
    

    15、事件对象属性_修改键

    都是事件对象的属性:
    功能:有没有按下对应的键。
    【注】在任何的事件对象里都能,访问这四个属性。

    e.ctrlKey
    如果你按下了ctrl键,值为true,否则为false

    e.shiftKey
    如果你按下了shift键,值为true,否则为false

    e.altKey
    如果你按下了alt键,值为true,否则为false

    e.metaKey 如果你按下了 windows/command 键,值为true,否则为false

    【注】主要用于实现组合键。

                window.onload = function(){
    				document.onclick = function(event){
    					var e = event || window.event;
    					/*if(e.shiftKey == true){
    						alert("点击 + shift")
    					}else{
    						alert("点击")
    					}*/
    					alert(getArr(e));
    				}
    			}
    
    			function getArr(event){
    				var arr = [];
    				if(event.shiftKey){
    					arr.push("shift");
    				}
    				if(event.ctrlKey){
    					arr.push("ctrl");
    				}
    				if(event.altKey){
    					arr.push("alt");
    				}
    				if(event.metaKey){
    					arr.push("windows");
    				}
    				return arr;
    			}
    

    16、键盘事件对象属性

    keydown
    keyup

    keypress 只有字符键支持

                window.onload = function(){
    				/*window.onkeydown = function(event){
    					var e = event || window.event;*/
    					// alert(e); //object KeyboardEvent]
    					/*
    						属性:
    						键码: keyCode 
    						注意: 只有才keydown和keyup下才有
    						功能: 输出对应按下的键的ASCII码值,无论你按下的字符是大写还是小写,统一返回大写字母的ASCII码值。
    						【注】有一部分键是和ASCII值不符合的。
    						【注】不支持charCode
    					*/
    					/*alert(e.keyCode);
    
    				}*/
    
    				/*
    					keypress
    					字符码:charCode
    					特点:1、只支持字符键 2、区分大小写
    					【注】不支持keyCode
    				*/
    				window.onkeypress = function(event){
    					var e = event || window.event;
    					// alert(e.charCode);
    
    					/*var str = String.fromCharCode(e.charCode)
    					alert(str);*/
    				}
    			}
    

    17、小游戏

    上下左右    上下左右走

    如果按下shift+上下左右键   快快的走 10倍速度。

    左上右下 37 38 39 40

    <style>
    			#xiaoming{
    				 100px;
    				height: 100px;
    				position: absolute;
    			}
    			#xiaoming img{
    				 100px;
    				height: 100px
    			}
    		</style>
    		<script>
    			
    			window.onload = function(){
    
    				var xiaoming = document.getElementById("xiaoming");
    
    				window.onkeydown = function(event){
    					var e = event || window.event;
    					// alert(e.keyCode);
    					var speed = 5;
    					//判断是否按下了shiftkey
    					if(e.shiftKey){
    						speed *= 10;
    					}
    
    
    					switch(e.keyCode){
    						case 37: //左
    							xiaoming.style.left = xiaoming.offsetLeft - speed + "px";
    							break;
    						case 38:
    							xiaoming.style.top = xiaoming.offsetTop - speed + "px";
    							break;
    						case 39: //右
    							xiaoming.style.left = xiaoming.offsetLeft + speed + "px";
    							break;
    						case 40:
    							xiaoming.style.top = xiaoming.offsetTop + speed + "px";
    							break;
    						default:
    							break;
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "xiaoming">
    			<img src="http://2t.5068.com/uploads/allimg/170616/1-1F616101S6-50.gif" alt="">
    		</div>
    

    18、目标对象

    window.onload = function(){
    				var oDiv = document.getElementById("div1");
    

    事件绑定
    目标对象.on+事件类型 = 函数;

    oDiv.onclick = function(event){
    					var e = event || window.event;
    

    /*
    e.target 获取触发该事件的对象
    IE8 以下不兼容
    window.event.srcElement
    */

                        alert(e.target.nodeName);
    					var target = e.target || e.srcElement;
    					alert(target.nodeName);
    				}
    			}
    

    19、事件流_冒泡

            <style>
    			div{
    				padding: 50px;
    			}
    			#div1{
    				background-color: red
    			}
    			#div2{
    				background-color: blue;
    			}
    			#div3{
    				background-color: yellow
    			}
    		</style>
    		<script>
    

    事件流:
    事件的冒泡:html页面天生的特点,如果多个标签重叠,并且拥有同一个事件,那么如果你点了里面的一个标签,这个事件会向外传递,逐一触发。由里层向外层执行。
    事件捕获:和事件冒泡正好相反,由外层向里层执行。

                window.onload = function(){
    				var nodes = document.getElementsByTagName("div");
    				for(var i = 0; i < nodes.length; i++){
    					nodes[i].onclick = function(){
    						alert(this.id);
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<div id = "div2">
    				<div id = "div3"></div>
    			</div>
    		</div>
    	</body>
    

    阻止事件冒泡的方法:
    1、事件对象.cancelBubble = true; //IE
    2、事件对象.stopPropagation(); //IE不兼容

                window.onload = function(){
    				var nodes = document.getElementsByTagName("div");
    				for(var i = 0; i < nodes.length; i++){
    					nodes[i].onclick = function(event){
    						var e = event || window.event;
    						alert(this.id);
    						// e.cancelBubble = true;
    						// e.stopPropagation();
    
    						stopBubble(e);
    					}
    				}
    			}
    

    阻止事件冒泡

                function stopBubble(event){
    				if(event.cancelBubble){
    					event.cancelBubble = true;
    				}else{
    					event.stopPropagation();
    				}
    			}
    
  • 相关阅读:
    初始化Winsock库
    memset与初始化
    老板不在,嚣张的正则
    教研室的下午,取快递的一天
    教研室的夜晚
    真不知道起什么名字了
    任性就是没长大咯
    难得起得早,难得周六上班
    工欲学其语,必先装软件
    151008-JS初级完成,PHP入门(变量常量等)-没假放了
  • 原文地址:https://www.cnblogs.com/zhongchao666/p/9275514.html
Copyright © 2020-2023  润新知