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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
jquery实现下载图片功能
Jul 18 jQuery
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
微信小程序实现转盘抽奖
Sep 21 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/11/24 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Python中属性和描述符的正确使用
2016/08/23 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python实现机器学习之元线性回归
2018/09/06 Python
详解python中@的用法
2019/03/27 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学自主招生自荐信范文
2014/02/26 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
主题班会开场白
2015/06/01 职场文书
房产证明范本
2015/06/19 职场文书