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); } }());