事件
2019-03-25 本文已影响0人
樊小勇
js里有许多事件下面简单介绍一下
- 绑定事件
<!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>事件绑定</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="clickFun1();">
点击1
</button><br>
<button id="btn">
点击2
</button><br>
<input type="text">
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
</body>
<script>
function clickFun1(){
console.log('点击1');
console.log(this);
// 这个时候this为window
}
var btn = document.querySelector('#btn');
btn.onclick = function(){
console.log('点击2')
console.log(this);
// 这个时候this为btn
}
// 标签事件
var $input = document.querySelector('input');
// 获得焦点事件 onfocus
$input.onfocus=function(){
console.log('输入框获得焦点')
}
// 失去焦点 onblur
$input.onblur=function(){
console.log('输入框失去焦点')
}
document.querySelector('#id1').onmouseout=function(){
console.log('第一个');
}
document.querySelector('#id2').onmouseover = function () {
console.log('第二个');
}
/* 前缀加上 on
keydown - 按下键盘
keypress - 按键
keyup - 松开键
input - 输入事件
change 输入框内容发生改变
scroll 滚动事件
load 一个页面或一幅画完成加载
mouseout 鼠标移入
mouseover 鼠标移出
*/
</script>
</html>
- 事件对象event
<!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>事件对象</title>
</head>
<body>
<button id="btn"> 点击</button>
<input type="text" id="inp">
<input type="text" name="" id="inp1">
</body>
<script>
var btn = document.querySelector('#btn');
btn.onclick=function(){
console.log(event);
}
// 项目里一般用ev简写来代表 event 事件对象
/* 添加event后可以在控制台看到这个事件的对象具体的内容
比如在页面什么位置点的等等
这个事件对象里面表示了事件的详细情况
由于对象里面有很多详细信息,可以根据详细信息来进行判断
通过判断可以执行想要达到的效果
*/
var inp = document.querySelector('#inp');
inp.onchange = function(ev){
console.log(ev);
}
var inp2 = document.querySelector('#inp1');
inp2.onkeydown = function(ev){
console.log(ev);
if (ev.key == 'Enter'){
alert('提交');
}
}
</script>
</html>
- 事件对象扩展
<!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>事件对象的扩展</title>
<style>
#out{
width: 200px;
height: 200px;
background: gray;
}
#in{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
<script>
document.querySelector('#out').onclick=function(ev){
console.log(ev);
console.log('绑定的元素是',ev.currentTarget);// 表示绑定的元素
console.log('点击的元素是',ev.target);//表示点击的元素
}
// 点击大的时候小的也把事件对象打印到控制台了
</script>
</html>
- 事件冒泡
<!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>冒泡事件</title>
<style>
.ste{
width: 200px;
height: 200px;
background: gray;
}
.box{
width: 100px;
height: 100px;
background: green
}
</style>
</head>
<body>
<div class="ste">
<div class="box">
</div>
</div>
</body>
<script>
$ste=document.querySelector('.ste');
$ste.addEventListener('click',function(ev){
alert('点击了ste');
},false)
/*
冒泡事件触发的条件，父级和子级绑定一样的事件
点击ste的时候弹出一个'点击了ste'
但是当点击box的时候,除了弹出'点击了box'外,还会弹出'点击了ste'
这个现象称为事件冒泡
从里往外,从子级往父级,以此类推
事件冒泡：
1.Dom树
2.事件流(事件传播)
3.事件流传播方式
4.阻止方式even.stop 或 return false
*/
$box=document.querySelector('.box');
$box.addEventListener('click',function(ev){
alert('点击了box');
},false)
</script>
</html>
- 监听器 事件冒泡的阻止
<!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>监听器</title>
<style>
#box{
width: 200px;
height: 200px;
background: gray;
}
#btn{
margin: 30px;
}
</style>
</head>
<body>
<div id="box">
<button id="btn">
点击
</button>
</div>
</body>
<script>
$btn=document.querySelector('#btn');
// 三个参数 1.事件名称 2.函数(监听器) 3.事件监听阶段-捕获阶段 冒泡阶段
// $btn.addEventListener('click',clickFun,false);
// function clickFun(ev) {
// console.log(ev);
// }
/*
添加点击事件,之前前面有on意思是绑定的意思,而现在add就是绑定的意思,所以不需要加on
false为冒泡,true为捕获
冒泡从里往外,比如儿子点击事件发生了,父级元素点击也可以发生
捕获从外往内,
*/
$btn.addEventListener('click',function(ev){
// 阻止事件冒泡 stopPropagation()
ev.stopPropagation();
alert('点击了btn');
},false);
$box=document.querySelector('#box');
$box.addEventListener('click',function(ev){
alert('点击了box');
},false);
// 这里会弹出两次,点击按钮的时候.这种现象就叫事件冒泡
</script>
</html>
- 默认事件的阻止方法
<!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>阻止默认事件</title>
<!-- 默认事件,比如a有默认跳转的效果,称为默认事件 -->
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
<script>
var $a = document.querySelector('a');
$a.addEventListener('click',function(ev){
// 阻止默认事件
ev.preventDefault();
alert('点击了');
},false)
</script>
</html>
- 默认事件和冒泡事件阻止方法总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止两个事件</title>
<style>
#box{
width: 200px;
height: 200px;
background: gray;
}
#btn{
margin: 30px;
}
</style>
</head>
<body>
<div id="box">
<button id="btn">
点击
</button>
</div>
<a href="http://www.baidu.com">百度</a>
</body>
<script>
/*
通过监听器添加事件
节点名.addEventListener('事件名称',function(ev){执行语句},false)
false表示模式为冒泡
true表示模式为捕获
ev为事件对象,执行代码里也可以通过事件对象来进行想要的判断
其中function(){}可以写为 函数名() 然后在外部进行函数名里面的编辑
*/
// 阻止默认事件a preventDefault()
$a = document.querySelector('a');
$a.addEventListener('click',function(ev){
ev.preventDefault();
alert('点击了a');
},false)
// 阻止冒泡事件,在子级里面加 stopPropagation()
$btn=document.querySelector('#btn');
$btn.addEventListener('click',function(ev){
alert('点击了btn');
},false)
$box=document.querySelector('#box');
$box.addEventListener('click',function(ev){
ev.stopPropagation();
alert('点击了box');
},false);
</script>
</html>
