JavaScript事件方法(实例讲解)

2019-11-19 16:14:46

字体：大中小

来源：转载

供稿：网友

废话不多说，直接上代码

<!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事件方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：NodeJS自定义模块写法(详解)

下一篇：简单谈谈原生js的math对象