dtcms文档 跨域 图像处理 私有变量 unity css object matrix methods playframework safari null 百度seo关键词 vue的优点 后台界面 jquery触发change事件 js键值对数组 android富文本框架 arduino程序 ab软启动器 linux下载器 plsql连接mysql数据库 flutter项目案例 python练习 python数据库 python编译环境 python返回函数 python函数内定义函数 java数据类型 java中正则表达式 java的环境配置 学习java基础 java语言运算符 linux基础教程 莫莫小工具 迷你版kms java程序设计基础 苹果剪辑 手机知识 彩虹岛小草黑暗之矛
当前位置: 首页 > 学习教程  > 编程语言

2020-12-28 JavaScript基本概念 事件

2020/12/28 20:04:45 文章标签:

11.1 事件 事件概述 事情发生并得到处理的操作,叫做事件,通俗的讲就是:事情来了,然后处理。 ​ 比如:手机铃声响了(事情来了)--------接电话(处理) ​ 当用户点击按钮的…

11.1 事件

事件概述

事情发生并得到处理的操作,叫做事件,通俗的讲就是:事情来了,然后处理。
​ 比如:手机铃声响了(事情来了)--------接电话(处理)
​ 当用户点击按钮的时候,我们会说触发了按钮的onclick事件

11.2 各种类型的事件

11.2.1 窗口事件

window

​ onload 当页面加载完成(页面结构、图片、css文件) 触发

​ onscroll 当滚动条 滚动时 触发

​ onerror 当出现错误(img、input、 script、style、资源加载失败)时触发

​ onresize 当浏览器窗口改变大小时触发

	//window.onload = function(){
    		var myid = document.getElementById('myid')
			//注意:script标签要放在body后面
	  	   // console.log(myid)
	  	    //}
	  	var isb = false
		window.onscroll = function(){
			//console.log(111)
			
			if(isb){
				clearTimeout(isb)
			}
			isb = setTimeout(function(){
				console.log('节流')
			},100)
		}
		//注意:碰到滚动条事件 要做节流操作
		window.onresize = function(){
			console.log('窗口改变大小')
		}

11.2.2 键盘事件

​ onkeydown 当键盘被按下 (不区分大小写。所有功能键都可以)

​ onkeypress 当键盘被按下并松开 (区分大小写。部分功能键 )

​ onkeyup 当键盘 松开 (不区分大小写。所有功能键都可以)

​ 按键码: event.keyCode

​ 回车 13

   账号:<input type="text" class="myclass" onkeydown="onkeydownFun(event)" >
   密码:<input type="text" class="myclass" onkeypress="onkeypressFun(event)" >
   验证码:<input type="text" class="myclass" onkeyup="onkeyupFun(event)" >
function onkeydownFun(event){
			console.log('键盘按下',event)
		}
		function onkeypressFun(event){
			console.log('按下并松开执行',event)
		}
		function onkeyupFun(event){
			console.log('键盘松开执行',event)
			if(event.keyCode == 13){
				console.log('登陆中。。。')
			}
		}
		//总结:event 事件对象,事件相关的所有参数 数据全在事件对象 
		// KeyboardEvent  key: "A" 就是键盘上的A  keyCode 65是键盘上A对象的unicolde码
		//type:'keydown'  这是事件名
		// onkeydown onkeyup不区分大小写,统一按大写计算unicode编码
		//onkeypress 区分大小写  大小写unicode编译不一样
		//回车 enter  keycode = 13 
		//场景1: 用户输入账号密码 验证码 回车登陆

11.2.3 鼠标事件

​ onclick 单击

​ ondblclick 双击

​ onmousedown 按下鼠标

​ onmouseup 松开鼠标

​ onmouseenter 鼠标进入目标元素

​ onmouseover 鼠标略过目标元素

​ onmouseleave 鼠标离开目标元素

​ onmouseout 鼠标略过离开目标元素

​ onmousemove 鼠标在目标元素上移动

​ onwheel 鼠标滑轮

​ oncontextmenu 鼠标右键

​ onselectstart 阻止选中文字图片

<body> 
<button onclick="onclickfun(event)">点击</button>
<button ondblclick="ondblclickFun(event)">双击</button>
<button onmousedown="onmousedownFun(event)">按下</button>
<button onmouseup="onmouseupFun(event)">松开</button>
<span onmouseenter="onmouseenterFun(event)">进入目标元素</span>
<span onmouseover="onmouseoverFun(event)">略过目标元素</span>
<span onmouseleave="onmouseleaveFun(event)">离开目标元素</span>
<span onmouseout="onmouseoutFun(event)">离开略过目标元素</span>
</body>
<script>
//      	   1.onclick		单击
function onclickfun(event){
console.log('点击',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "click" 事件类型
}
// ​			ondblclick	双击
function ondblclickFun(event){
console.log('双击',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "dblclick" 事件类型
}
// ​			onmousedown	按下鼠标
function onmousedownFun(event){
console.log('按下',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mousedown" 事件类型
}
// ​			onmouseup		 松开鼠标
function onmouseupFun(event){
console.log('松开',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mouseup" 事件类型
}
// ​			onmouseenter	鼠标进入目标元素
function onmouseenterFun(event){
console.log('进入',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mouseenter" 事件类型
}
// ​			onmouseover	  鼠标略过目标元素
function onmouseoverFun(event){
console.log('略过',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mouseove" 事件类型
}
// ​			onmouseleave	鼠标离开目标元素
function onmouseleaveFun(event){
console.log('离开',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mouseleave" 事件类型
}
// ​			onmouseout 	  鼠标略过离开目标元素	
function onmouseoutFun(event){
console.log('离开略过',event)
//总结:MouseEvent 事件对象名,target 绑定事件的元素, type: "mouseout" 事件类型
}
// ​			onmousemove	鼠标在目标元素上移动
window.onmousemove = function(event){
// console.log('鼠标移动',event)
//总结:所有事件最后一个参数就是event 
//总结:鼠标移动事件 必须做节流 
//总结:MouseEvent 事件对象名,target 绑定事件的元素html, type: "onmousemove" 事件类型
}
// ​			onwheel				鼠标滑轮
window.onwheel = function(event){
console.log('滚轮',event)
//总结:WheelEvent  事件对象名,target 绑定事件的元素html, type: "wheel" 事件类型
}
// oncontextmenu 鼠标右键
document.oncontextmenu=function (event){
console.log('右键',event)
//总结:MouseEvent 事件对象名,target  事件对象名,target 绑定事件的元素html, type: "contextmenu" 事件类型
//return false; //禁用右键

}
//阻止选中文字 图片
document.onselectstart=function (){
return false;
}
</script>

https://www.cnblogs.com/web100/p/js-enable-copy.html

11.2.4 表单事件

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变–按下回车/失去焦点

oninput 内容改变–每次

onselect 选中内容

onsubmit 按下 submit按钮

onreset 按下 reset 按钮11.1 事件

<body> 
<form action="www.baidu.com">
<input type="text" onfocus="onfocusFun(event)" onblur="onblurFun(event)" onchange="onchangeFun(event)" oninput="oninputFun(event)" onselect="onselectFun(event)">
<button onsubmit="onsubmitFun(event)">提交</button>
<button onreset="onrestFun(event)">重置</button>
</form>


</body>
<script>
//      表单事件  
//表单  input textarea select radio checkbox 
// onfocus		获得焦点
function onfocusFun(event){
console.log('获取焦点',event)
//总结: FocusEvent 事件对象名称,target绑定的元素, 事件类型 type: "focus"
}
// onblur		  失去焦点
function onblurFun(event){
console.log('失去焦点',event)
//总结: FocusEvent 事件对象名称,target绑定的元素, 事件类型 type: "blur"
}
// onchange	   内容改变--按下回车/失去焦点
function onchangeFun(event){
console.log('内容改变并且失去焦点或回车',event)
//总结: Event 事件对象名称,target绑定的元素, 事件类型 type: "change"
//可以通过target 获取元素 .value 获取值
}
// oninput		 内容改变--每次
function oninputFun(event){
console.log('内容改变就触发',event)
//总结: InputEvent 事件对象名称,target绑定的元素, 事件类型 type: "input"
//可以通过target 获取元素 .value 获取值
}
// onselect		选中内容
function onselectFun(event){
console.log('选中触发',event)
//总结: Event  事件对象名称,target绑定的元素, 事件类型 type: "select"
//可以通过target 获取元素 .value 获取值
} 
// onsubmit		按下 submit按钮  // form 和 onsubmit  和 onreset 是一套
function onsubmitFun(event){
console.log('提交',event)
//一般场景下  不用form提交  提交会触发action请求  并自动刷新当然页  
}
// onreset			按下 reset 按钮11.1 事件	
function onresetFun(event){
console.log('重置',event)
}
</script>

11.3 事件对象event

  • 事件对象常用属性

    target type keyCode screenX

  • 事件对象兼容性写法
    在触发DOM上的某个事件时,会产生一个事件对象event。
    ​ 这个对象中包含着所有与事件有关的信息。
    ​ 包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。
    ​ Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function (event) {
                var e = event || window.event;
                console.log(e.target);
            };
            btn.onmouseover = function (event) {
                var e = event || window.event;//为了兼容
                console.log(e.target);
        }
    </script>
    

    ​ 事件函数里面有几个常用的属性,我们来看一下:
    ​ 1.screenX和screenY 是以屏幕为基准进行测量,即:当前元素距离屏幕的尺寸
    ​ 2.pageX 和 pageY 是以当前文档(绝对定位)为基准,不适用于IE6-8;会计算滚动长度
    ​ 3.clientX 和 clientY 是以当前可视区域为基准,类似于固定定位。会忽略滚动长度

    <body> 
    		<div id="box" class="myclass">
    	    </div>
    
    </body>
         <script>
         //它们常常和offset家族联合使用来动态获取鼠标相对于盒子的位置(距离盒子边框的距离):
        // var box = document.getElementById("box");
        // box.onmousemove = function (event) {
        //     var e = event || window.event; //兼容性写法  如果前面对象存在取前面 如果没 取后面
        //     //event本身 有兼容性问题
     
        //     var x = e.clientX - box.offsetLeft;
        //     var y = e.clientY - box.offsetTop;
        //     // console.log(x, y);
        //     box.innerHTML = '(x: ' + x +', y:' + y +')';
        // }
    
    
    	(function(){  //自执行函数
    		var box=document.querySelector("#box");
    		box.onclick=function(e){
    			var ev=e||window.event;
    			console.log("ev:",ev);
    			
    			//获取鼠标距离页面左侧距离
    			console.log("ev.clientX:",ev.clientX);
    			//获取鼠标距离页面顶部距离
    			console.log("ev.clientY:",ev.clientY);
    			
    			//获取触发该事件的元素;都是指向触发事件的元素
    			console.log("ev.target:",ev.target);//event.target 属性返回哪个 DOM 元素触发了事件
    			console.log("ev.srcElement:",ev.srcElement);
    		}
    	}());
    
    

本文链接: http://www.dtmao.cc/news_show_550418.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?