js html 交互监听事件学习

事件处理程序（handler）：

HTML事件处理程序：

<input type="button" value="Click Here" onclick="showMessage();" />

    <script type="text/javascript">

        function showMessage() {

            alert('Clicked!');

        }

JavaScript指定事件处理程序：

<input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">

        var btnClick = document.getElementById('btnClick');

        btnClick.onclick = function showMessage() {

            alert(this.id);

        };

    </script>

DOM2事件处理程序：

<input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">

        var btnClick = document.getElementById('btnClick');

        btnClick.addEventListener('mouseover', function() {

            alert(this.id);

        }, false);

        btnClick.addEventListener('click', function() {

            alert('Hello!');

        }, false);

    </script>

add与remove的参数必须一样
<input id="btnClick" type="button" value="Click Here" />

    <script type="text/javascript">

        var btnClick = document.getElementById('btnClick');

        var handler=function() {

            alert(this.id);

        }

        btnClick.addEventListener('click', handler, false);

        btnClick.removeEventListener('click', handler, false);

    </script>