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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
详解Webpack4多页应用打包方案
Jul 16 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出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
js计算精度问题小结
2013/04/22 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python六大开源框架对比
2015/10/19 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
运动会广播稿30字
2014/01/21 职场文书
人事专员职责
2014/02/22 职场文书
班组长竞聘书
2014/03/31 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年消防工作总结
2014/11/21 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android