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>

上一篇:【题解】P1972 [SDOI2009]HH的项链 - 树状数组


下一篇:HDU3401 Trade (单调队列优化dp)