arguments是函数中的隐含对象
通过arguments[0]、arguments[1]可以获得函数的参数
arguments.callee可以获得正在被调用的函数
<script>
function add(){
//对象 -- 伪数组
window.alert(arguments.callee)
return arguments[0] + arguments[1]
}
window.alert(add(1, 2))
var countDown = 5;
var span = document.getElementById('counter');
window.setTimeout(function(){
countDown -= 1;
if(countDown == 0){
window.location.href = 'https://www.baidu.com';
}else{
span.textContent = countDown;
//arguments是函数中的隐含对象
//通过arguments[0]、arguments[1]可以获得函数的参数
//arguments.callee可以获得正在被调用的函数
window.setTimeout(arguments.callee, 1000);
}
}, 1000);
</script>
通过document对象获取页面元素的常用的方法有5个：
document.getElementById('...') == 通过ID获取单个元素
document.getElementsByTagName('...') == 通过标签名获取标签的列表
document.getElementsByClassName('...') == 通过类名获取标签的列表
document.querySelector('...') == 通过样式表选择器获取单个元素
document.querySelectorAll('...') == 通过样式表选择器获取元素的列表
<script type="text/javascript">
var index = 0;
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']
var img = document.querySelector('img');
// var img = document.getElementsByTagName('img')[0];
var timerId;
startIt();
var div = document.querySelector('#adv')
div.addEventListener('mouseout', startIt)
div.addEventListener('mouseover', stopIt)
var li = document.querySelectorAll("#circlefather>li");
function startIt(){
timerId = window.setInterval(function(){
index += 1;
index %= images.length;
img.src = 'img/' + images[index];
}, 2000)
}
function stopIt(){
window.clearInterval(timerId);
}
</script>
当你知道事件发生是要做什么 但是你不知道事件什么时候发生
在这种情况下通常的处理方式都是绑定一个事件 回调函数（callback）
closeWindow以及下面的匿名函数都属于事件发生时才执行的函数
<script type="text/javascript">
var okButton = document.querySelector('#ok');
// 给OKButton绑定click事件的回调函数
function closeWindow(){
if (window.confirm('Close the window?')){
window.close();
}
}
// okButton.addEventListener('click', closeWindow)
okButton.addEventListener('click', function(){
window.alert('hello world');
okButton.removeEventListener('click', arguments.callee);
});
</script>
addEventListener方法的第一个参数是事件名
第二个参数是事件发生时需要执行的回调函数
第三个参数是一个布尔值
如果是true表示事件捕获 - 从外层向内层传递事件
如果是false表示事件冒泡 - 从内层向外层传递事件
一般情况下我们事件处理的方式都是事件冒泡（默认行为）
如果想阻止事件的传播行为可以调用事件对象的stopPropagation 方法
<script type="text/javascript">
var one = document.querySelector('#grfather');
var two = document.querySelector('#father');
var three = document.querySelector('#son');
one.addEventListener('click', function(){
window.alert('I am one');
})
two.addEventListener('click', function(evt){
window.alert('I am two');
evt.stopPropagation();
})
// 事件回调函数中的第一个参数是事件对象（封装了和时间相关的信息）
three.addEventListener('click', function(evt){
window.alert('I am three');
evt.stopPropagation();
})
</script>
通过事件对象的target属性可以获取事件源（谁引发了事件）
但是有的浏览器是通过srcElement属性获取事件源的
可以通过短路或运算来解决这个兼容性问题
当获取到一个元素之后可以通过它的属性来获取它的父节点、子节点以及兄弟节点
parentNode - 父元素
firstChild / lastChild / children - 第一个元素 、最后一个元素
previousSibling / nextSibling - 前一个兄弟元素 、 后一个兄弟元素
<script type="text/javascript">
var buttons = document.querySelectorAll('#buttons>button')
for(var i = 0; i < buttons.length; i += 1){
buttons[i].firstChild.addEventListener('click', function(evt){
var checkbox = evt.target || evt.srcElement;
if (checkbox.checked){
checkbox.parentNode.style.backgroundColor = 'deepskyblue';
}else{
checkbox.parentNode.style.backgroundColor = 'deeppink';
}
evt.stopPropagation();
});
buttons[i].addEventListener('click', function(evt){
// 通过事件对象的target属性可以获取事件源（谁引发了事件）
// 但是有的浏览器是通过srcElement属性获取事件源的
// 可以通过短路或运算来解决这个兼容性问题
var button = evt.target || evt.srcElement;
// 当获取到一个元素之后可以通过它的属性来获取它的父节点、子节点以及兄弟节点
// parentNode - 父元素
// firstChild / lastChild / children - 第一个元素 、最后一个元素
// previousSibling / nextSibling - 前一个兄弟元素 、 后一个兄弟元素
var checkbox = button.firstChild;
checkbox.checked = !checkbox.checked;
if (checkbox.checked){
button.style.backgroundColor = 'deepskyblue';
}else{
button.style.backgroundColor = 'deeppink';
}
});
}
</script>
