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 相关文章推荐
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue实现页面滚动到底部刷新
Aug 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
综合图片计数器
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
财务助理岗位职责
2013/11/10 职场文书
车贷收入证明范本
2014/01/09 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android