快捷導(dǎo)航

JavaScript事件方法(實(shí)例講解)

更新時(shí)間：2017年06月27日 07:59:24 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript事件方法(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

廢話不多說，直接上代碼

<!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="加長(zhǎng)" onclick="changeSize()"/>
<input type="button" value="點(diǎn)我" onclick="showMessage()"/>
<input type="button" id="btn1" value="按鈕" />

<p> 只有三次抽獎(jiǎng)機(jī)會(huì)！ </p>
<input id="btnLottery" type="button" value="抽獎(jiǎng)"/>
<div id="divResult">

</div>
<script type="text/javascript">
var times = 0; //次數(shù)
var arr = ['一千萬', '女神一枚', '布加迪威龍', '海景別墅', '全英雄全皮膚','無限充值','逢賭必贏'];

var btnLottery = document.getElementById('btnLottery');
btnLottery.onclick = function () {
if(times >= 3)
{
alert("你已經(jīng)抽完三次了！");
this.onclick = null;
return;
}
times++;
var n = Math.floor(Math.random() * arr.length); //數(shù)組中隨機(jī)抽一個(gè)
var divResult = document.getElementById('divResult');
divResult.innerHTML = "<p>您是第"+ times +"次抽獎(jiǎng)，抽中的是："+ arr[n] +"</p>"
}
</script>

<input type="button" id="btnDOM2Test" value="測(cè)試DOM2事件處理"/>
<input type="button" id="btnDelDOM2Test" value="測(cè)試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">請(qǐng)輸入手機(jī)號(hào)碼</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);
//都不是數(shù)字
if (e.keyCode < 48 || e.keyCode > 57) {
EventUtil.preventDefault(e);
}
});
</script>

<form id="frmDemo" action="submitPage.htm">
<h3>用戶登錄</h3>
<label for="txtUID">賬號(hào)：</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事件方法(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: