JavaScript事件方法(实例讲解)

废话不多说，直接上代码

rush:js;"> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

只有三次抽奖机会！

ottery" type="button" value="抽奖"/>

<input type="button" id="btnDOM2Test" value="测试DOM2事件处理"/>
<input type="button" id="btnDelDOM2Test" value="测试DOM2删除事件处理"/>
<script type="text/javascript">
var sayHi = function () {
alert('Hello!');
}

var btnDOM2Test = document.getElementById('btnDOM2Test');
btnDOM2Test.addEventListener('click',function () {
alert('您单击的是：' + this.value);
},false);

btnDOM2Test.addEventListener('click',sayHi,false);

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

var del = function () {
btnDOM2Test.removeEventListener('click',function () {
alert('您单击的是：' + this.value);
},false);
btnDOM2Test.removeEventListener('click',false);
}
btnDelDOM2Test.addEventListener('click',del,false);

//IE9+
//btnDOM2Test.attachEvent("onclick",sayHi);
//btnDOM2Test.attachEvent("onclick",function () {
// alert("IE事件绑定!");
//});

<label for="txtPhoneNum">请输入手机号码
<input type="text" id="txtPhoneNum"/>
<script type="text/javascript">
var txtPhoneNum = document.getElementById('txtPhoneNum');
EventUtil.addHandler(txtPhoneNum,'keypress',function () {
var e = EventUtil.getEvent();
//alert(e.keyCode);
//都不是数字
if (e.keyCode < 48 || e.keyCode > 57) {
EventUtil.preventDefault(e);
}
});

<form id="frmDemo" action="submitPage.htm">

用户登录

登录"/>

<script type="text/javascript">
var txtUID = document.getElementById('txtUID');
var txtPWD = document.getElementById('txtPWD');
var btnSubmit = document.getElementById('btnSubmit');
var frmDemo = document.getElementById('frmDemo');

EventUtil.addHandler(btnSubmit,'click',function () {
alert('我提交了！');
if (txtUID.value == "admin") {
frmDemo.submit(); //提交
}
else {
return;
}
});

EventUtil.addHandler(txtUID,'keydown',function () {
var e = EventUtil.getEvent(); //Enter.keyCode = 13;
if (e.keyCode == 13) {
txtPWD.focus();
EventUtil.preventDefault(e);
}
});

<div onclick="this.style.backgroundColor='red'; event.cancelBubble=true;">div1
<div onclick="this.style.backgroundColor='blue';">div2
<div onclick="this.style.backgroundColor='black';">div3