JavaScript事件方法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
background-color:lightblue;
margin:5px;
padding:5px;
}
</style>
<script src="Scripts/EventUtil.js" type="text/javascript"></script>
<script type="text/javascript">
var changeSize = function () {
var oTxt = document.getElementById(‘txt‘);
oTxt.size += 5;
}
var showMessage = function () {
alert(‘單擊事件‘);
alert(‘事件類型：‘ + event.type);
}
window.onload = function () {
document.getElementById(‘btn1‘).onclick =
function () {
alert(‘btn1單擊事件‘);
}
}
</script>
</head>
<body>
<input type="text" id="txt" size="10"/>
<input type="button" value="加長" onclick="changeSize()"/>
<input type="button" value="點我" onclick="showMessage()"/>
<input type="button" id="btn1" value="按鈕" />
<p> 只有三次抽獎機會！ </p>
<input id="btnLottery" type="button" value="抽獎"/>
<div id="divResult">
</div>
<script type="text/javascript">
var times = 0; //次數
var arr = [‘一千萬‘, ‘女神一枚‘, ‘布加迪威龍‘, ‘海景別墅‘, ‘全英雄全皮膚‘,‘無限充值‘,‘逢賭必贏‘];
var btnLottery = document.getElementById(‘btnLottery‘);
btnLottery.onclick = function () {
if(times >= 3)
{
alert("你已經抽完三次了！");
this.onclick = null;
return;
}
times++;
var n = Math.floor(Math.random() * arr.length); //數組中隨機抽一個
var divResult = document.getElementById(‘divResult‘);
divResult.innerHTML = "<p>您是第"+ times +"次抽獎，抽中的是："+ arr[n] +"</p>"
}
</script>
<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‘, sayHi, false);
}
btnDelDOM2Test.addEventListener(‘click‘, del, false);
//IE9+
//btnDOM2Test.attachEvent("onclick", sayHi);
//btnDOM2Test.attachEvent("onclick", function () {
// alert("IE事件綁定!");
//});
</script>
<label for="txtPhoneNum">請輸入手機號碼</label>
<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);
}
});
</script>
<form id="frmDemo" action="submitPage.htm">
<h3>用戶登錄</h3>
<label for="txtUID">賬號：</label>
<input type="text" id="txtUID"/><br />
<label for="txtPWD">密碼：</label>
<input type="password" id="txtPWD"/><br />
<input type="button" id="btnSubmit" value="登錄"/>
</form>
<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);
}
});
</script>
<div onclick="this.style.backgroundColor=‘red‘; event.cancelBubble=true;">div1
<div onclick="this.style.backgroundColor=‘blue‘;">div2
<div onclick="this.style.backgroundColor=‘black‘;">div3
</div>
</div>
</div>
</body>
</html>
JavaScript事件方法