JavaScript事件方法(实例讲解)


Posted in Javascript onJune 27, 2017

废话不多说,直接上代码

<!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事件方法(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
javascript每日必学之运算符
Feb 16 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
简单谈谈原生js的math对象
Jun 27 #Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 #Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 #Javascript
基于jQuery封装的分页组件
Jun 26 #jQuery
深入理解Angular中的依赖注入
Jun 26 #Javascript
详解AngularJS2 Http服务
Jun 26 #Javascript
详解用node.js实现简单的反向代理
Jun 26 #Javascript
You might like
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
理解javascript对象继承
2016/04/17 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python中requests小技巧
2017/05/10 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
党章学习心得体会2016
2016/01/14 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫