<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');/* 伪数组的方式获取了两个按钮,伪数组有数组结构但是没有数组方法 */
//1.传统方式注册事件
btns[0].onclick = function(){
alert('hi');
}
btns[0].onclick = function(){
alert('hao a u');
}
//2.事件监听方式注册事件
/* (1)事件类型是字符串必须加引号 而且不带on
(2)同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
注意:IE9以上才支持 */
btns[1].addEventListener('click',function(){
alert('hello');
});
btns[1].addEventListener('click',function(){
alert('world');
});
</script>
</body>
</html>
attachEvent不建议使用,IE9之前可以使用,只做了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function(){
alert('11');
//1.传统方法删除事件
divs[0].onclick = null;
}
//2.用emoveEventListener方法删除事件
divs[1].addEventListener('click',fn);//里面的fn不需要调用加小括号
function fn() {
alert('22');
divs[1].removeEventListener('click',fn);
}
//3.特殊情况删除事件,ie9之前使用
divs[2].attachEvent('onclick',fn1);
function fn1(){
alert('33');
divs[2].detachEvent('onclick',fn1);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father{
width: 200px;
height: 200px;
background-color: pink;
position: relative;
margin: 100px auto;
}
.son{
width: 150px;
height: 150px;
background-color: blueviolet;
position: absolute;
top: 25px;
left: 25px;
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//dom 事件流 三个阶段
//1、js代码中只能执行捕获或者冒泡其中的一个阶段
//2、onclick和attEvant(ie) 只能得到冒泡阶段
//3、捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html ->
//body -> father -> son
var son = document.querySelector('.son');
son.addEventListener('click', function(){
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function(){
alert('father');
}, true);
//4、冒泡阶段 如果addEventListener 第三个参数是 false 那么则处于冒泡阶段 son -> father ->body
//-> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function(){
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function(){
alert('father');
}, false);
document.addEventListener('click', function(){
alert('document');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<script>
// 事件对象
var div = document.querySelector('div');
div.onclick = function(event){
console.log(event);
}
div.addEventListener('click', function(e){
console.log(e);
console.log(window.event);
e = e || window.event;
console.log(e);
});
//1.event就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
//2.事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
//3.事件对象 是我们一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息
//鼠标坐标等,如果是键盘事件,里面就包含了键盘事件的信息,比如 判断用户按下了哪个键
//4.这个事件对象我们可以自己命名 比如event,evt,e
//5.事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 e = e || window.event;
</script>
</body>
</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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
// 区别 : e.target 点击了那个元素,就返回那个元素 this 那个元素绑定了这个点击事件,那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
})
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this);
console.log(e.currentTarget);
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
console.log(e.target);
})
// 了解兼容性
// div.onclick = function(e) {
// e = e || window.event;
// var target = e.target || e.srcElement;
// console.log(target);
// }
// 2. 了解 跟 this 有个非常相似的属性 currentTarget ie678不认识
</script>
</body>
</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>Document</title>
<style>
</style>
</head>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 常见事件对象的属性和方法
// 1. 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// 2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);
}
</script>
</body>
</html>
注意:事件委托原理必须背下来!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p{
font-size: 20px;
line-height: 30px;
background-color: aqua;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul>
<li>知否知否,点我应有弹窗在手!</li>
<li>知否知否,点我应有弹窗在手!</li>
<li>知否知否,点我应有弹窗在手!</li>
<li>知否知否,点我应有弹窗在手!</li>
<li>知否知否,点我应有弹窗在手!</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
// alert('123');
// e.target这个可以获取当前点击对象
// e.target.style.backgroundColor = 'pink';
e.target.className = 'p';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是一段不愿意分享的文字
<div>
123
</div>
<script>
//1.contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e){
e.preventDefault();
});
//2.禁用鼠标选中 selectstart,防止Ctrl+c 跟 Ctrl+v
document.addEventListener('selectstart', function(e){
e.preventDefault();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//鼠标事件对象 MouseEvent
document.addEventListener('click',function(e){
//1.鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);//X跟Y都必须大写
//2.鼠标在文档页面的x和y坐标
console.log(e.pageX);
console.log(e.pageY);//X跟Y都必须大写
//3.鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);//X跟Y都必须大写
});
</script>
</body>
</html>
跟随鼠标的小天使源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
width: 100px;
height: 80px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<img src="/JavaScript study/images/3.jpg" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove',function(e){
//console.log(e);
img.style.top = e.pageY - 40 + 'px';
img.style.left = e.pageX -50 + 'px';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//常用的键盘事件
//1.keyup 按键弹起的时候触发
document.onkeyup = function(){
console.log('我弹起了');
}
//2.keydown 按键按下的时候触发
document.onkeydown = function(){
console.log('我按下了');
}
//3.keypress 按键按下的时候触发,但是不识别功能键
document.onkeypress = function(){
console.log('我按下了,但不识别功能键');
}
//4.三个时间的执行顺序 keydown --> keypress --> keyup
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
//1.我们的keyup和keydown事件3不区分字母大小写 a和A得到的都是65
//2.我们的keypress事件 区分字母大小写
document.addEventListener('keyup', function(e){
// console.log(e);
console.log(e.key);
console.log('up' + e.keyCode);
});
document.addEventListener('keypress', function(e){
// console.log(e);
console.log(e.key);
console.log('press' + e.keyCode);
});
</script>
</body>
</html>
京东搜索框按S光标获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">
<input type="search">
<button>搜索</button>
</div>
<script>
var ipt = document.querySelector('input');
document.addEventListener('keyup', function(e){
if(e.key === 's'){
ipt.focus();// 获得焦点
}else{
alert('按s获取焦点');
}
});
</script>
</body>
</html>
京东快递单号查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.son1{
border: 1px solid red;
width: 168px;
height: 25px;
display: none;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<input type="text">
<button>查询</button>
</div>
<script>
var son1 = document.querySelector('.son1');
var ipt = son1.nextElementSibling;
ipt.addEventListener('keyup',function(e){
if(this.value !== ''){
son1.style.display = 'block';
son1.innerHTML = this.value;
//son1.innerHTML = e.key;这种写法错误的因为e.key始终只有一个值
}else{
son1.style.display = 'none';
}
});
//当我们失去焦点就隐藏上方盒子
ipt.addEventListener('blur', function(e){
son1.style.display = 'none';
});
//当我们获得焦点就显示这个盒子
ipt.addEventListener('focus', function(e){
if(this.value !== ''){
son1.style.display = 'block';
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
alert('点击我');
});
});
</script>
<button>点击</button>
</body>
</html>
图片很多的情况下适用于这种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load',function(){
var div = document.querySelector('div');
window.addEventListener('resize', function(){
//console.log('变化了');
console.log(window.innerWidth);
if(window.innerWidth < 900){
div.style.display = 'none';
}else{
div.style.display = 'block';
}
});
});
</script>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.setTimeout
//语法规范:window.setTimeout(调用函数, 延时时间);
//1.这个window在调用的时候可以省略
//2.这个延时时间单位是毫秒 但是可以省略 如果省略默认的是0
//3.这个调用函数可以直接写函数 还可以写函数名
//4.页面中可能有很多的定时器,我们经常给定时器加标识符(名字)
window.setTimeout(function(){
console.log('时间到了');
},2000);
function boom(){
console.log('boom!');
}
// 给不同的定时器起名字,防止冲突
var time1 = setTimeout(boom, 2000);
var time2 = setTimeout(boom, 5000);
//最后一种不提倡的写法,太啰嗦
setTimeout('boom()', 2000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>炸弹</div>
<button>点击停止定时器</button>
<script>
var div = document.querySelector('div');
var btn = div.nextElementSibling;
var boom = setTimeout(function(){
div.innerHTML = '爆炸了!';
} ,5000);
btn.addEventListener('click', function(){
window.clearTimeout(boom);
div.innerHTML = '炸弹解除!';
div.style.backgroundColor = 'green';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>停止</button>
<script>
//1.setInterval
//语法规范:window.setInterval(调用函数, 延时时间);
var a = window.setInterval(function(){
console.log('a');
}, 1000);
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
window.clearInterval(a);
});
</script>
</body>
</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>Document</title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白
// 2. 开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop1 = begin.nextElementSibling;
var i = 0;
var b = null;// 一点要赋值不然是未定义的,null是一个空对象
begin.addEventListener('click', function () {
b = setInterval(function () {
console.log(i++);
}, 1000);
});
stop1.addEventListener('click', function () {
clearInterval(b);
});
</script>
</body>
</html>
短信定时器效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 30px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
<button>发送</button>
</div>
<script>
var btn = document.querySelector('button');
var time = 6;
var s = null;
// btn.onclick = function(){
// btn.innerHTML = '在秒内不能再点击';
// }
btn.addEventListener('click', function(){
btn.disabled = true;
var s = setInterval(function(){
if(time == 0){
clearInterval(s);
btn.disabled = false;
btn.innerHTML = '发送';
time = 6;
}else{
btn.innerHTML = '在' + time-- + '秒内不能再点击';
}
}, 1000);
});
</script>
</body>
</html>
获取URL参数案例
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>登录页面</p>
<div>
<form action="index.html">
用户名: <input type="text" name="uname"> <input type="submit" value="提交">
</form>
</div>
</div>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>首页</div>
<span class="name"></span><span>欢迎光临</span>
<script>
console.log(location.search); //?uname=andy
//1.先去掉? substr('起始的位置', 截取几个字符);
var params = location.search.substr(1);//uname=andy
//2.利用=把字符串分割成数组 split('=');
var arr = params.split('=');
var uname = document.querySelector('.name');
uname.innerHTML = arr[arr.length-1];
</script>
</body>
</html>