JavaScript事件方法(实例讲解)
程序员文章站
2023-09-06 17:12:24
废话不多说，直接上代码
废话不多说，直接上代码
<!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事件方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。