事件监听器``` 直接在HTML元素上使用onevent方式绑定事件监听器用onevent方式绑定事件监听器并为函数传

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件监听器</title>

</head>

<body>

    <button type="button" onclick="bound()">直接在HTML元素上使用onevent方式绑定事件监听器</button>

    <!-- 在 onevent 之后指定的函数参数中使用 this 时，this 表示当前元素本身 -->

    <button type="button" onclick="show(this)">用onevent方式绑定事件监听器并为函数传入参数</button>

    

    <script type="text/javascript">

        function bound(){

            let self = arguments.callee ;

            console.log( '当前函数:' , self );

            let caller = self.caller

            console.log( '函数调用者:' , caller );

            let event = caller.arguments[ 0 ];

            console.log( event );

            let target = event.target ;

            console.log( target );

        }

        function show( x ){

            console.log( x );

        }

    </script>



    <button type="button" class="third">选中元素后再使用onevent方式绑定事件监听器</button>



    <script type="text/javascript">

        let btn = document.querySelector( '.third' ); 

        btn.onclick = function(){

            console.log( arguments[ 0 ] );

        }

    </script>



    <button type="button" class="fourth">选中元素后再使用addEventListener方式绑定事件监听器</button>



    <script type="text/javascript">

        let btns = document.getElementsByClassName( 'fourth' ); 

        let type = 'click' ;

        let listener = {

            handleEvent(){

                console.log( arguments[ 0 ] );

            }

        }

        let useCapture = false ;

        btns[0].addEventListener( type , listener , useCapture );

    </script>

</body>

</html>