JavaScript事件方法(实例讲解)

253 阅读 0 评论 167 点赞

我是靠谱客的博主老迟到小虾米，这篇文章主要介绍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>

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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>