JavaScript基础 - js对象和绑定对象事件

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>