事件
事件的三大要数
事件绑定对象
指的是,绑定事件和事件处理函数的标签
这个标签有可能不是触发事件的标签
事件类型
绑定的标签的事件类型
鼠标事件 表单事件 键盘事件 触摸事件 特殊事件
事件处理函数
触发事件时执行的程序
一个标签,往往相同的事件类型只能绑定一个事件处理函数
如果要绑定多个事件处理函数,需要使用事件监听语法
事件类型之鼠标事件
-
<div></div> <script> // 1,左键单击事件 click oDiv.onclick = function(){ console.log('触发的是鼠标左键单击事件'); } // 2,左键双击事件 dblclick // 3,右键单击事件 contextmenu // 4,鼠标按键按下事件 mousedown // 5,鼠标按键抬起事件 mouseup // 6,鼠标移入事件 // 经过标签边界线的时候触发 // mouseover mouseenter // 经过子级会触发 oDiv.onmouseover = function(){ console.log('我进来了1111'); } // 经过子级不触发 oDiv.onmouseenter = function(){ console.log('我进来了2222'); } // 7,鼠标移出事件 // 经过标签边界线的时候触发 // mouseout mouseleave // 经过子级会触发 oDiv.onmouseout = function(){ console.log('我出去了1111'); } // 经过子级不会触发 oDiv.onmouseleave = function(){ console.log('我出去了2222'); } // 8,mousemove 鼠标移动 // 鼠标在标签范围内移动,会触发事件 </script>
事件类型之表单事件
-
<script> // 1, focus 标签获取焦点事件 // 所谓的鼠标焦点,就是鼠标点击的对象是当前标签 // 2, change 标签失去焦点,并且数据改变,触发事件 // 触发事件有两个条件 // 1,标签失去焦点 --- 焦点在其他标签上 // 2,标签的数据,发生改变 // 3, input 标签输入内容时,触发事件 // 4, submit 表单提交事件 // 绑定给form表单标签 // 可以阻止提交表单 // 多用于,提交数据时,做判断操作 // 如果数据不符合要求,就阻止表单提交 标签对象.onsubmit = function(e){ //阻止默认事件的执行 事件对象.preventDefault(); e.preventDefault(); window.alert('您输入的数据有误') } </script>
事件对象event
// 事件对象,指的是触发绑定事件的标签
// 有时触发事件的标签和绑定事件的标签,不是一个标签(事件委托)
// 事件对象,是事件处理函数的参数,这个参数可以随便定义,一般定义成 event 或者 e,表示是 事件对象
事件对象兼容处理
// 低版本ie有专门的语法来存储事件处理函数对象
// 一般浏览器 || 低版本IE浏览器
// 兼容语法 e = e || window.event
-
<script> // 事件对象兼容处理 var oDiv = document.querySelector('div'); oDiv.onclick = function(e){ e = e || window.event; console.log(e); } </script>
事件类型之键盘事件
// 键盘事件,不能绑定给某个标签
// 必须是, window 或者 document 两个使用效果完全一致
// 或被者是, 可以选中的,可以获取焦点的标签
// input select textarea button a …
-
<script> // keydown 按键按下事件 , 如果按住不放,会一直触发 // keyup 按键抬起事件 window.onkeydown = function(){ console.log(123); } // 按键的事件对象 // e.key 存储你按下的按键的名称 // 键盘区域的数值和小键盘区域的数值,不做区分,都是相同的 // e.keyCode 每个按键对应一个数值,绝对不会重复 // 使用这个属性来区分每个按键 // 按键编码 // 需要做兼容处理,兼容的是低版本的火狐浏览器 // var 变量 = e.keyCode || e.which // 现在用的很少了 // 按键组合 // ctrl alt shift + 其他组合按键 // 事件对象e中有3个属性 // ctrlKey 按下 ctrl 结果是 true 没有按结果是false // altKey 按下 alt 结果是 true 没有按结果是false // shiftKey 按下 shift 结果是 true 没有按结果是false // 判断按下按键是 ctrl + e (69) window.onkeydown = function(e){ // 按下 ctrl键 按下,按键编码是69的按键 if(e.altKey == true && e.keyCode == 69){ console.log('同时按下alt和e键'); } } </script>
触摸事件和特殊事件
-
触摸事件 用于移动端事件
- touchstart 触摸开始
- touchend 触摸结束
- touchmove 触摸移动
-
特殊事件
-
<script> // 当过度结束时 transitionend 当过度结束时执行 // 当动画结束时 animationend 当动画结束时执行 // 有几个执行属性,程序就执行几次操作 var oDiv = document.querySelector('div'); oDiv.ontransitionend = function(){ console.log('过度结束了') } </script>
-
事件对象的目标 e.target
// 绑定事件标签的子级标签,也会触发父级绑定的事件
// 此时触发事件的对象是子级标签,不是绑定事件的标签
-
低版本的IE浏览器,没有 事件对象.target ,有 srcElement
-
兼容语法 :
var eTar = e.target || e.srcElement
冒泡事件 / 事件的传播
什么是冒泡事件: 子级标签触发事件,JavaScript中,父级程序,默认也会触发相同类型的事件
-
<script> //IE浏览器是从 子级向父级 获取标签,称为 冒泡机制 //其他浏览器 是 从 父级向子级 获取标签,称为 捕获机制 //现在所有的执行顺序都是从当前标签向父级标签执行 // 阻止事件的传播 / 阻止冒泡事件 // 事件对象.stopPropagation() // 兼容问题 // 低版本IE浏览器 // 事件对象.cancelBubble = true; 阻止冒泡事件,阻止事件的传播 // 兼容语法 if(事件对象.stopPropagation){ 事件对象.stopPropagation(); }else{ 事件对象.cancelBubble = true; } //加了stopPropagation() 可以阻止冒泡事件 事件对象.onclick = function(e){ e = e || window.event; console.log('我是inner-div触发的事件'); if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } } </script>
事件的委托
给当前标签添加事件
通过判断触发事件的标签,是子级元素的标签
根据不同的标签,执行不同的代码,称为事件的委托
给标签添加事件,子级标签触发,不同标签,触发不同程序
-
<div id="div1"> <button>点击</button> <span class="span1">我是span1</span> <span class="span2">我是span2</span> <strong name="abc">我是strong标签</strong> </div> <script> // 使用 e.target 对象的属性来进行判断 // e.target.id 触发事件标签对象的id属性值 // e.target.className 触发事件标签对象的class属性值 // e.target.TagName 触发事件标签对象的标签名称都是大写字母 // e.target.getAttribute('属性') 通过getAttribute,获取属性 var oDiv = document.querySelector('div') oDiv.onclick = function(e){ // 只会触发符合条件时执行程序,点击不同的标签,触发不同的事件 // id属性值 if(e.target.id == 'div1'){ console.log('触发事件的标签是div') } // 标签名称 必须都是大写字符 if(e.target.tagName == 'BUTTON'){ console.log('触发事件的标签是button') } // class属性值 if(e.target.className == 'span1'){ console.log('触发事件的标签是第一个span标签') } // class属性值 if(e.target.className == 'span2'){ console.log('触发事件的标签是第二个span标签') } // 通过 getAttribute() 获取属性的属性值 if(e.target.getAttribute('name') == 'abc'){ console.log('触发事件的标签是strong标签') } } </script> -
<script> //用法 删除表格 部分 tbd.onclick = function(e){ //事件对象兼容处理 e = e || window.event; //事件对象的目标兼容处理 var eTag = e.target || e.srcElement; //当前标签下的子标签是否执行了点击事件 //判断 if(eTag.tagName == 'BUTTON'){ //获取该子标签的属性index的属性值 相当于拿到当前点击事件的子标签和父标签对应的索引值 var index = eTag.getAttribute('index'); //删除索引位置的子标签 也就是点击事件的标签对象内容 arr.splice(index,1); //重新调用新的表格内容并渲染页面 setTab(); } } </script>
标签禁用属性
disabled 禁用属性 禁止使用标签,不能操作,也不能传参
oBtn.disabled = true;是 布尔属性 在JavaScript中,与checked一样,通过true,fasle来定义
事件对象的相关信息,存储在事件对象中的属性
-
1,
事件对象.offsetX 事件对象.offsetY点击时距离 边框线内 标签左上角 坐标 -
2,
事件对象.clientX 事件对象.clientY点击时距离 视窗窗口 左上角 坐标 -
3,
事件对象.pageX 事件对象.PageY点击时距离 页面 左上角 坐标 -
如果页面没有滚动,页面的左上角和视窗窗口的左上角重合 两个数值是一样的
-
如果页面滚动,页面的左上角不再与视窗窗口的左上角重合 两个数值是不同的
可视窗口的宽度高度
-
情况1:包括滚动条的宽度高度
window.innerHeight高度/window.innerWidth宽度
-
情况2:不包括滚动条宽度高度
document.documentElement.clientHeight高度document.documentElement.clientWidth宽度
事件点击移动页面方块移动
-
<style> *{ margin: 0; padding: 0; } body{ height: 2000px; } div{ width: 100px; height: 100px; position: fixed; left: 0; top: 0; background-color: brown; } </style> <div></div> <script> var oDiv = document.querySelector('div'); //获取方块起始起始位置的坐标 //window.getComputedStyle 兼容处理 if(window.getComputedStyle){ var oLeft = window.getComputedStyle(oDiv).left; var oTop = window.getComputedStyle(oDiv).top; }else{ var oLeft = oDiv.currentStyle.left; var oTop = oDiv.currentStyle.top; } // 视窗窗口的宽度,高度 不包括滚动条 //包括滚动条:window.innerHeight、window.innerWidth var winWidth = document.documentElement.clientWidth; var winHeight = document.documentElement.clientHeight; //鼠标点击拖动 window.onmousedown = function(){ window.onmousemove = function(e){ e = e || window.event; var x = e.clientX - oDiv.offsetWidth/2; var y = e.clientY - oDiv.offsetHeight/2; // 给定位数值,添加极限范围数值, // 定位的最大值,最小值,都要有范围 // 最小值 : 上 左 都是 0 if(x < 0){ x = 0; } if(y < 0){ y = 0; } // 最大值 : 下 右 可视窗口的宽 / 高 - 目标方块的宽 / 高 if(x > winWidth - oDiv.offsetWidth){ x = winWidth - oDiv.offsetWidth; } if(y > winHeight - oDiv.offsetHeight){ y = winHeight - oDiv.offsetHeight; } oDiv.style.left = x + 'px'; oDiv.style.top = y + 'px'; } } //鼠标抬起 window.onmouseup = function(){ window.onmousemove = null; //回到起始位置 oDiv.style.left = oLeft; oDiv.style.top = oTop; } </script>
事件的监听
作用:
如果是普通的事件绑定,相同事件类型,只能绑定一个事件处理函数
如果同一个类型,绑定多个事件处理函数,后绑定的事件会覆盖之前绑定的事件
语法:
标签对象.addEventListener(事件类型 , 事件处理函数)
第三个参数: true / false(默认值)
oDiv1.addEventListener('click' , function(){} , true)事件的获取方式
冒泡 : 从子级开始,向父级执行
捕获: 从父级开始,向子级执行
浏览器默认都是冒泡的执行方式
可以通过 addEventListener 第三个参数来设定获取方式
默认值 false 是 冒泡方式 true是捕获方式
一般实际项目中,不定义第三个参数,就使用默认方式
低版本IE,只支持冒泡,不支持捕获,不会报错,只会按照冒泡的顺序执行
事件监听的兼容方式
普通浏览器
标签对象.addEventListener(‘事件类型’ , 事件处理函数)
事件类型必须是字符串形式,直接写事件类型名称,不能有on
低版本IE浏览器
标签对象.attachEvent(‘on事件类型’ , 事件处理函数)
使用函数的方式,来做兼容处理
参数1,要绑定的事件对象
参数2,要绑定的事件类型
参数3,要绑定的事件处理函数
<div></div>
<script>
var oDiv = document.getElementById('div');
myAddEvent(oDiv , 'click' , function(){console.log(123) } );
function myAddEvent(ele,type,fun){
if(ele.addEventListener){
ele.addEventListener(type,fun)
}else{
ele.attachEvent( 'on'+type , fun)
}
}
</script>
事件监听的删除
注意:
绑定时,必须是函数名称,或者存储函数的变量名称 才能删除
绑定时,如果直接定义函数,是不能删除的
原因:
两个函数,程序相同,但是地址不同
<div>123</div>
<script>
var oDiv = document.querySelector('div');
var fun4 = function(){
console.log('abc');
}
oDiv.addEventListener('click' , fun1);
oDiv.addEventListener('click' , fun2);
oDiv.addEventListener('click' , fun3);
oDiv.addEventListener('click' , fun4);
oDiv.addEventListener('click' , function(){console.log('别想删我')});
// 可以删除
oDiv.removeEventListener('click' , fun1);
oDiv.removeEventListener('click' , fun4);
// 不能删除
oDiv.removeEventListener('click' , function(){console.log('别想删我')});
function fun1(){
console.log(123);
}
function fun2(){
console.log(456);
}
function fun3(){
console.log(789);
}
//控制台结果:fun1 fun4 被删除 其他都执行
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
