目录
1 常见事件对象的属性和方法
1.1 e.target 和 this的区别
e.target 点击了那个元素，就返回那个元素 ；this是绑定了那个元素，返回那个
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
//常见的事件对象的属性和方法
//1 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 e.target会指向触发事件的也就是li
console.log(this);
console.log(e.target);
})
</script>
</body>1.2 阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
//阻止冒泡
var son = document.querySelector('.son');
son.addEventListener('click', function (e) {
alert('son');
e.stopPropagation();
e.cancelBubble=ture;//一些存在兼容性问题的可以使用
}, false);2 BOM
2.1BOM
浏览器对象属性，提供独立于内容而与浏览器窗口进行交互的对象，核心是windows
window对象是浏览器的顶级对象
1 是js访问浏览器的一个接口
2 是一个全局对象 定义在全局作用域中的变量、函数都会变成window对象的属性和方法（调用时可以省略）
2.2窗口加载事件
<body>
<button>点击</button>
<script>
window.onload = function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('请点击');
})
}
window.onload = function () {
alert(22);
}
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('111');
})
document.addEventListener('DOMContentLoaded', function () {
alert(33);
})
</script>
</body>addEventListener 没有限制
2.3 调整窗口大小事件
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>2.4 定时器
2.4.1 setTimeout
使用
<script>
//1 setTimeout
//语法规范: window.setTImeout（调用函数，延时时间）；
//window在调用时可以省略
//延时的单位时间是毫秒 但是可以省略，省略默认是0
//调用函数可以直接写函数 还可以写 函数名 还有一个写法'函数名（）'
//定时器一般很多，加标识符（名字）
setTimeout(function () {
console.log('时间到了');
}, 2000);
function callpack() {
console.log('爆炸了');
}
setTimeout(callpack, 3000);
setTimeout('callpack()', 3000);//我们不提倡这个写法
</script>
</body>清除
<body>
<button>点击停止倒计时</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function () {
console.log('爆炸了');
}, 3000);
btn.addEventListener('click', function () {
clearTimeout(timer);
})
</script>
</body>2.4.2 setInterval()
二者区别
使用
<body>
<script>
// 1setInterval()
// 语法规范： windo。setInterval(调用函数，延时时间)；
setInterval(function () {
console.log('continue put');
}, 1000)
</script>
</body>清除
<body>
<button class="begin">开始定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click', function () {
timer = setInterval(function () {
console.log('good');
}, 1000);
})
stop.addEventListener('click', function () {
clearInterval(timer);
})
</script>
</body>2.4.3 this指向问题
2.5 js执行机制
2.5.1 同步和异步
区别：流水线上各个流程的执行顺序不同
3 location 对象
3.1 对象属性
href返回整个地址 search返回参数
3.1.1 location对象的方法
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//location.assign('http://www.baidu.com') //记录浏览历史，可以实现后退功能
// location.replace('http://www.baidu.com') //不记录浏览历史，不可以实现后退功能
//location.reload('#')//重新加载页面
})
</script>3.1.2 navigator对象
3.1.3 history对象
<body>
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//history.forward();
history.go(1);
})
</script>
</body><body>
<a href="index_list.html">点击我去往主页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//history.back();
history.go(-1);
})
</script>
</body>
1652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
