七事件
一 事件基础
1.事件的核心内容
事件的核心内容
a：通过谁触发事件（事件源）
b、事件对象
c、事件处理程序
语法:
obj.onclick = function(){}
2.常用事件
鼠标事件：
onclick
ondblclick 双击
oncontextmenu 右击
onmouseover onmouseout 鼠标移入移出(查一下两个的区别)
onmouseenter onmouseleave 鼠标移入移除
onmousedown onmousemove onmouseup... 鼠标按下 滑动 抬起
滚轮事件
onmousewheel
键盘事件
onkeyup 键盘抬起
onkeydown 键盘按下(任何键都可以)
onkeypress 键盘按下 (字母键数字键)
滚动条事件
onscroll
window.onscroll = function(){}
表单事件
onfocus 获得焦点
onblur 失去焦点
oninput 文本框输入事件(实时监控文本框)
onchange 文本框失去焦点内容发生改变时触发
onsubmit 表单提交 form才有
案例;
//鼠标移入
oBox[0].onmouseover = function(){
console.log(1);
}
//鼠标移出
oBox[0].onmouseout = function(){
console.log(2);
}
鼠标移出
oBox[0].onmouseenter = function(){
console.log(1);
}
//鼠标移出
oBox[0].onmouseleave = function(){
console.log(2);
}
//鼠标按键按下
oBox[0].onmousedown = function(){
console.log(1);
}
//鼠标移动
oBox[0].onmousemove = function(){
console.log(2);
}
//鼠标按键抬起
oBox[0].onmouseup = function(){
console.log(3);
}
//鼠标滚轮
oBox[0].onmousewheel= function(){
console.log(aaa);
}
//键盘事件
键盘按下
document.onkeydown = function(){
console.log(1);
}
//键盘抬起
document.onkeyup = function(){
console.log(2);
}
var oInput = $('input');
//获取焦点时打印
oInput[0].onfocus = function(){
console.log(1);
}
//失去焦点时打印
oInput[0].onblur = function(){
console.log(2);
}
二 事件对象
事件对象：当触发 onclick, onkeyup ,.........这些事件时，会产生一个事件对象event。
不同事件产生的事件对象对应的属性不同
谷歌浏览器 ： window.event 事件参数 evt
火狐 或 ie ： window.event
语法:
事件源.事件 = function(e){
e = e || window.event; 获取事件对象并且处理兼容问题
//事件处理程序
}
注:点击谁,谁就是事件源
事件对象:
1.事件类型
e.type ----获取结果没有on
2.鼠标位置
offsetX offsetY 鼠标再元素上面的位置
clientX clientY 鼠标距离浏览器窗口左 上的位置
pageX pageY client + 滚动条的距离
screenX screenY 距离屏幕的距离
案例:
//事件源获取
document.onclick = function(e){
e = e || window.event;
console.log(e);
}
//获取事件类型
document.onclick = function(e){
e = e || window.event;
console.log(e.type);
}
案例:
//鼠标显示位置
var txt = $('textarea');
document.onmousemove = function(e){
e = e || window.event;
var
x = e.clientX,
Y = e.clientY;
txt[0].value = '距离左侧:'+x+'距离顶部:'+Y;
}
//图片跟随着鼠标进行移动
var oImg = $('img');
document.onmousemove = function(e){
//获取事件信息
e = e || window.event;
//获取鼠标的位置信息
var
l = e.clientX,
t = e.clientY;
//根据鼠标位置信息,
oImg[0].style.left = l - 50 + 'px';
oImg[0].style.top = t - 50 + 'px';
}
//鼠标点击更改图片(按下)
document.onmousedown = function(){
oImg[0].src = './img/2.jpg';
}
//鼠标点击更改图片(抬起)
document.onmouseup = function(){
oImg[0].src = './img/1.jpg';
}
//放大境效果
<div class="imgShow">
<img src="./img/img/small.jpg" alt="">
<span class="flter"></span>
<div class="bigBox">
<img class= "bigImg" src="./img/img/big.jpg" alt="">
</div>
</div>
<script src='../../myAPi/myApi.js/myAPI.js'></script>
<script>
/*
1.遮罩层随着鼠标移动而移动(鼠标移动的范围在小图里面)
2.大图随着遮罩层的移动而移动
*/
/*
遮罩层/bigBox = 小图/ 大图
150/500 = 300/1000
*/
var
oImgShow = $('.imgShow')[0],
oFilter = $('.flter')[0],
oBigImg = $('.bigImg')[0],
oBigBox = $('.bigBox')[0];
oImgShow.onmousemove = function(e){
e = e || window.event;
//获取鼠标移动的位置
var
l = e.clientX - oImgShow.offsetLeft - oFilter.offsetWidth/2,
t = e.clientY - oImgShow.offsetTop - oFilter.offsetHeight/2;
//对鼠标移动的边界进行处理
l = l <= 0 ? 0 : (l >= 150 ? 150 :l);
t = t <= 0 ? 0 : (t >= 150 ? 150 :l);
oFilter.style.left = l +'px';
oFilter.style.top = t +'px';
//控制大图的位置()
oBigImg.style.left = -l/0.3 +'px';
oBigImg.style.top = -t/0.3 +'px';
}
oImgShow.onmouseover = function(){
oFilter.style.display = 'block';
oBigBox.style.display = 'block';
}
oImgShow.onmouseout = function(){
oFilter.style.display = 'none';
oBigBox.style.display = 'none';
}
</script>
三 键盘事件
//获取按键的ascii码值
document.onkeydown = function(e){
e = e || window.event;
//获取按键
var keyCode = e.keyCode || e.which;
console.log(keyCode);
//将ascii码转成对应的字符
console.log(String.fromCharCode(keyCode));
}
//打字游戏
/*
1.获取box中字符的ascii码
2.如果输入的字母和box中的相对应,
3则随机产生一个字符(65-90),并且放在box里面
*/
var oBox = document.querySelector('div');
document.onkeydown = function (e) {
//获取事件对象的信息
e = e || window.envent;
var letterCode = oBox.innerHTML.charAt(0).charCodeAt(0);
console.log(letterCode);
//获取输入字符的ascii码
var keyCode = e.keyCode || e.which;//解决兼容问题
//输入的字符和当前字符做对比
if (keyCode == letterCode) {
var num = randomNumber(65, 90);
oBox.innerHTML = String.fromCharCode(num);
}
}
//聊天框
<section class="txtShow">
<!-- <p>文本文本文本文本文本文本</p> -->
</section>
<div class="box">
<input type="text" class="info">
<button class="btn">发送</button>
</div>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
/*
业务逻辑:
1.获取info输入的内容信息
2.将内容信息填到一个新元素中
3.将新元素放section中
新添加功能:
1.文字输入完,输入框清空
2.空格不能发送
3.输入文字显示时间
4.在添加Div,在div中添加span 和p 标签
*/
var
oInfo = $('.info')[0],
oBtn = $('.btn')[0],
oTxtShow = $('.txtShow')[0];
function info(){
if(oInfo.value){//如果输入的信息不为空时在执行;
//获取输入信息
var infoVal = oInfo.value;
//创建一个div div用来存放时间 和 p
var createDiv = document.createElement('div');
var createP = document.createElement('p');//创建节点,存放info信息
createP.innerHTML = infoVal;//把info中的信息,存放在p中
//将p中的信息放到div中
createDiv.appendChild(createP);
//发送每一条信息都带有时间
var date = new Date();//获取现在的时间
//把时间放在一个span标签中
var createSpan = document.createElement("span");
//把时间放在span中
createSpan.innerHTML = mendZero(date.getHours())+':'+mendZero(date.getMinutes())+':'+mendZero(date.getSeconds());
//将span加到Div 中
createDiv.appendChild(createSpan);
oTxtShow.appendChild(createDiv);//将Div放在oTxtShow中
oTxtShow.scrollIntoView(true);//让内容始终在可视区域
oInfo.value = '';//清空输入框
}
}
//事件绑定
oBtn.onclick = function(){
info();
}
//键盘触发
document.onkeydown = function(e){
e = e || window.event;
var keyCode = e.keyCode || e.which;
//回车发送
if( keyCode == 13 && e.ctrlKey){
info();
}
}
</script>
四 阻止浏览器默认
1.什么是浏览器的默认行为
a、右键会出现菜单
b、点击超链接会发生跳转
c、点击 type="submit"的按钮会提交表单
d、图片拖拽
2.阻止浏览器默认行为
1、利用事件对象属性 和 returnValue (以后都用这两种)
preventDefault是一个方法：e.preventDefault();
returnValue的值是一个常量：e.returnValue = false; //ie8及以下浏览器
2、兼容
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
3、右键菜单事件
document.oncontextmenu = function(e){}
//阻止浏览器的默认行为
function preventDefault(e){
return e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
案例:制作一个右键菜单
<div class="menu"></div>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
var oMenu = $('.menu');
document.oncontextmenu = function(e){
e = e || window.event;
preventDefault(e);
var
l = e.clientX,
t = e.clientY;
oMenu[0].style.display = 'block';
oMenu[0].style.left = l + 'px';
oMenu[0].style.top = t + 'px';
}
五 事件监听
1.DOM 0级事件
场景 现在有元素div，用属性形式给div添加两次点击事件
div.onclick = function(){
alert(1)
}
div.onclick = function(){
alert(2);
}
缺陷：重复定义事件后面的会覆盖前面的
2.事件监听： dom2级事件
addEventListener()方法特点：
- element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡 阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
- addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么 采用先绑定先执行的规则。
- addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。
- 注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。
- 可以使用 removeEventListener() 来移除之前绑定过的事件。
attachEvent()方法特点：
* attachEvent是 IE 有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。
attachEvent()是 后绑定先执行。
绑定时间时，attachEvent必须带 on，如 onclick，onmouseover 等
ele.addEventListener(事件类型，回调函数，布尔值) //存在兼容问题
参数解析:
事件类型：click contentmenu mouseover mouseout........
回调函数:事件处理程序
布尔值： 一般不去设置，控制事件流 如果为true 为事件捕获 否则为事件冒泡
ele.attachEvent(事件，回调函数) //IE
参数解析
事件： onclick onmouseover
回调函数： 事件处理程序
------------------------------------------------
案例:封装事件监听(解决兼容问题)
function addEventListener(ele, eventType, fn) {
return ele.addEventListener ? ele.addEventListener(eventType, fn) : ele.attachEvent('on' + eventType, fn);
}
addEventListener(document, 'click', function () {
console.log(1);
})
六事件流
1.事件冒泡和事件捕获
1、什么是事件流
当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流
简单理解：元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
2.冒泡和捕获
冒泡事件流：
微软提出了名为事件冒泡(event bubbling)的事件流
事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素 开始发生，一直向上传播，直到根节点
如果你的手指指向一个靶子，并射中某一环，并不仅仅是对某一环产生了操作，而是对全局都产生了操作
捕获事件：
网景提出另一种事件流名为事件捕获(event capturing)。事件的传播由父元素到子元素传递的过程，称为事件捕获
老版本IE，没有事件捕获的特性
浏览器的事件默认执行并传播的顺序是：
window---->document----->html----->body----->.........---->目标元素 捕获过程
目标元素---->.........----->body---->html---->document---->window 冒泡过程
2.阻止事件冒泡
e.stopPropagation() //兼容 ie方法
e.cancelBubble = true //属性
//阻止事件冒泡
function stopPropagation(e){
return e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
七 事件代理
1.什么是事件源
1、什么是事件源
概念：真正触发事件的元素
事件对象是一个属性
源是一个元素
2、怎么获取事件源？
1、先获取事件对象
2、e、target||e.srcElement
3、事件源有什么作用
通过事件源可以知道真正触发事件的元素
2.事件代理/事件委托
1.事件代理:
把事件绑定到父元素上,对事件源进行判断,然后执行不同的代码块;(className tagName)
2、事件源：真正触发事件的对象
var target = e.target||e.srcElement
tagName能找到事件源的元素名
3、原理：利用冒泡机制，将子元素的事件委托给父元素去监听(给父元素添加事件)，当子元素触发事件时，事件冒泡到父级如果希望指定的子元素才能触发事件，可以通过事件对象(event)获得事件源(target)，然后通过条件判断是不是期望的子元素，如果是的话，执行事件，否则不执行
4、事件委托的好处
1、实现对未来元素事件的绑定
未来元素：绑定事件时，页面上还不存在的元素
2、减少事件绑定，提高性能
案例:实时编辑(重要)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:800px;
overflow:hidden;
background:orange;
margin-top:30px;
}
h2,h3{
font-size:24px;
line-height:30px;
text-align:center;
float:left;
}
h2{
width:150px;
background:orangered;
}
h3{
width:500px;
background:orchid;
}
span{
width:150px;
float:right;
font-size:24px;
color:#fff;
font-weight:bold;
line-height:30px;
text-align:center;
background:pink;
}
section{
width:800px;
margin-top:30px;
}
article{
width:800px;
overflow:hidden;
background:powderblue;
border:3px solid black;
}
article h2,article h3{
color:#fff;
}
</style>
</head>
<body>
<label for="">学员姓名</label>
<input type="text" class='stuName'>
<label for="">联系方式</label>
<input type="text" class='tel'>
<button class ='btn'>信息发布</button>
<div>
<h2>名称</h2>
<h3>联系方式</h3>
<span>删除信息</span>
</div>
<sectio class="infroBox">
<!-- <article>
<h2>王小名</h2>
<h3>1111111</h3>
<span>delete</span>
</article> -->
</section>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
/* 1.获取输入框中的元素
2.创建新的元素
3.将获取的元素放到新元素里面
*/
var
stuN =document.querySelectorAll('.stuName')[0],
oTel = document.querySelectorAll('.tel')[0],
oBtn = document.querySelectorAll('.btn')[0],
oInfo = document.querySelectorAll('.infroBox')[0];
function student(){
var
stuNval = stuN.value,
oTelVal = oTel.value;
if(stuNval && oTelVal){
//创建新元素
var createArticle = document.createElement('article');
var createH2 = document.createElement('h2');
var createH3 = document.createElement('h3');
var createSpan = document.createElement('span');
//将获取的内容放到新元素中
createH2.innerHTML = stuNval;//把名称放到h2中
createH3.innerHTML = oTelVal;//把联系方式放到h3中
createSpan.innerHTML = 'delete';
createArticle.appendChild(createH2);
createArticle.appendChild(createH3);
createArticle.appendChild(createSpan);
oInfo.appendChild(createArticle);
}
}
//事件代理:
function del(e){
//获取事件对象
e = e || window.event;
//获取事件源(触发事件的元素)
var target = e.target || e.srcElement;
//对事件源进行判断
if(target.tagName =='SPAN'){
//如果事件源是span, 则删除其父元素
target.parentNode.remove();
}
}
//绑定事件
// oBtn.onclick = function(){
// student();
// }
//绑定事件第二种方法(事件监听)
addEventListener(oBtn,'click',student);
addEventListener(oInfo,'click',del);
</script>
</body>
</html>
八 拖拽(重要)
1、拖拽的场景
a、音乐进度条
b、消息框
c、滑动验证码
2、拖拽三剑客
onmouseDown/onmousemove/onmouseUp
onmouseDown:鼠标按下
onmouseUp:鼠标抬起
onmousemove:鼠标移动
3、拖拽原理
a、给目标元素添加onmouseDown事件，拖拽的前提是在目标元素按下左键
b、当onmouseDown发生以后，此时给document添加onmousemove,这就意味着此时鼠标在网页的移动都将改变目标元素的位置
c、在onmousemove事件中，通过事件对象获取鼠标位置，更改元素的left top值
目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）
目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）
document.onmousemove = null;
d、给documen添加onmouseUp事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果，在onmouseup事件中，取消document的onmousemove事件即可。
案例:图片拖拽
<img src="./1.jpg" alt="">
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
var oImg = document.getElementsByTagName('img')[0];
oImg.onmousedown = function(e) {
e = e || window.event;
//阻止浏览器的默认行为
preventDefault(e);
//获取鼠标在元素中距离左侧和上侧的位置
var
x = e.offsetX,
y = e.offsetY;
console.log(x,y);
//鼠标移动
document.onmousemove = function (e) {
e = e || window.event;
preventDefault(e);
//获取鼠标的位置
var
l = e.clientX,
t = e.clientY;
//图片跟着鼠标进行移动
oImg.style.left = l - x + 'px';
oImg.style.top = t - y + 'px';
//鼠标按键抬起
document.onmouseup = function () {
document.onmousemove = null;
}
}
}
</script>
案例:
<body>
<div class = 'box'></div>
<script>
var oBox = document.getElementsByClassName('box')[0];
/*
拖拽三剑客:
onmousedown
onmousemove
onmouseup
*/
oBox.onmousedown = function(e){
//获取事件对象
e = e || window.event;
//当鼠标按下时,获取鼠标距离元素左侧和上侧的距离
var
x = e.offsetX,
y = e.offsetY;
//当鼠标移动时,元素也进行移动
document.onmousemove = function(e){
e = e || window.event;
//获取鼠标的位置
var
l = e.clientX,
t = e.clientY;
//div 移动的位置(注:一定要减去鼠标在元素内部的距离)
oBox.style.left = l - x +'px';
oBox.style.top = t - y +'px';
}
//单鼠标抬起时
document.onmouseup = function(){
//鼠标移动清空
document.onmousemove = null;
}
}
// ele.addEventListener('事件类型'，回调) 事件监听
// ele.removeEventListener('事件类型',回调) 事件解绑
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 100px;
width: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./myApi.js"></script>
<script>
var oBox = $('.box')[0];
var fn = null;
//事件监听
addEventListener(oBox, 'mousedown', function (e) {
e = e || window.evnet;
var
x = e.offsetX,
y = e.offsetY;
addEventListener(document,'mousemove',function (e) {
e = e || window.event;
var
l = e.clientX,
t = e.clientY;
oBox.style.left = l - x + 'px';
oBox.style.top = t - y + 'px';
//事件解绑
addEventListener(document, 'mouseup', function () {
document.removeEventListener('mousemove', fn);
})
})
})
</script>
//音乐进度条
<section>
<div></div>
<span></span>
</section>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
var
oDiv = document.getElementsByTagName('div')[0],
oSpan = document.getElementsByTagName('span')[0];
oSpan.onmousedown = function(e){
e = e || window.event;
//获去鼠标距span左侧和上侧的位置
var x = e.offsetX;
console.log(x);
document.onmousemove = function(e){
e = e || window.event;
//获取section(父元素)距离左边的位置
var sectionLeft = oSpan.parentNode.offsetLeft;
console.log(sectionLeft);
//获取鼠标的位置
var l = e.clientX - x - sectionLeft;
console.log(l);
//对span的运动边界进行限制
l = l <= 0 ? 0 : ( l >= 984 ? 984 : l);
oSpan.style.left = l+'px';
oDiv.style.width = l+'px';
document.onmouseup = function(){
document.onmousemove = null;
}
}
}
淘宝验证
<section>
<div></div>
<span></span>
</section>
<script src='../../myAPi/myApi.js/myAPI.js'></script>
<script>
var
oSpan = $('span')[0],
oDiv = $('div')[0];
var speed = 10;
oSpan.onmousedown = function (e) {
e = e || window.event;
preventDefault(e);
var x = e.offsetX;
document.onmousemove = function (e) {
e = e || window.event;
preventDefault(e);
//获取元素距左侧的位置
var sectionLeft = oSpan.parentNode.offsetLeft;
//获取鼠标的位置
var l = e.clientX - x - sectionLeft;
console.log(l);
//对运动边界的处理
l = l <= 0 ? 0 : (l >= 964 ? 964 : l);
oSpan.style.left = l + 'px';
oDiv.style.width = l + 'px';
//如果拖拽到最右侧,改变div颜色
if (l == 964) {
oDiv.style.background = 'green';
}
document.onmouseup = function () {
document.onmousemove = null;
//判断div是否拖拽到最右侧
if (oDiv.offsetWidth < 964) {
//div和span 回归到原点
var timer = setInterval(function(){
//定时器控制div的宽
oDiv.style.width = oDiv.offsetWidth - speed + 'px';
//控制span向left移动
oSpan.style.left = oSpan.offsetLeft - speed + 'px';
//通过div的宽,关闭定时器
if (oDiv.offsetWidth < speed) {
//注:关闭定时器不要加引号,加引号会成为字符串,识别不了
clearInterval(timer);
oDiv.style.width = 0;
oSpan.style.left = 0;
}
}, 30)
}
}
}
}
//魅族验证
<body>
<section>
<article></article>
<span></span>
</section>
<div>
<h2></h2>
</div>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
var
oH2 = document.querySelector('h2'),
oDiv = document.querySelector('div'),
oSpan = document.querySelector('span');
oH2.onmousedown = function (e) {
e = e || window.event;
preventDefault(e);
var x = e.offsetX;
document.onmousemove = function (e) {
e = e || window.event;
preventDefault(e);
var l = e.clientX - x - oDiv.offsetLeft;
l = l <= 0 ? 0 : (l >= 270 ? 270 : l);
oH2.style.left = l + 'px';
//小图随着下面的图移动
oSpan.style.left = l + 'px';
document.onmouseup = function () {
document.onmousemove = null;
//判断验证是否成功
if (oSpan.offsetLeft >= 190 && oSpan.offsetLeft <= 210) {
alert('验证成功');
oSpan.style.left = '200px';
oH2.style.left = '200px';
} else {
alert('验证失败');
oSpan.style.left = 0;
oH2.style.left = 0 ;
}
}
}
}
</script>
九 checked
获取复选框的状态
checkbox.checked true(当前为选择状态) false(未选择状态)
if(checkbox.checked){}
更改复选框的状态
checkbox.checked = true;//选中
checkbox.checked = false;//取消
var
aInput = document.querySelectorAll('input');
aSpan = document.querySelector('span');
aSpan.onclick = function(){
for(var i = 0 ;i < aInput.length;i++){
//未被选中时false
if(aInput[i].checked){
aInput[i].checked = false;
}else{
aInput[i].checked = true;
}
}
}
