溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaScript事件方法的示例分析

發(fā)布時(shí)間：2021-08-18 14:22:56 來(lái)源：億速云 閱讀：125 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了JavaScript事件方法的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

上代碼

<!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('事件類(lèi)型：' + 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 = ['一千萬(wàn)', '女神一枚', '布加迪威龍', '海景別墅', '全英雄全皮膚','無(wú)限充值','逢賭必贏'];

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">
<h4>用戶(hù)登錄</h4>
<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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript事件方法的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手