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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python实现加密的方式总结
2020/01/19 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
会计专业自我评价
2014/02/12 职场文书
公司联欢会策划方案
2014/05/19 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
委托书格式要求
2015/01/28 职场文书