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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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/05/22 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python实现转圈打印矩阵
2019/03/02 Python
python 如何设置守护进程
2020/10/29 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
一名女生的自荐信
2013/12/08 职场文书
文明村创建实施方案
2014/03/27 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js