js html 交互监听事件学习

浏览数：23 / 时间：2015年06月09日

事件处理程序（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>