废话不多说，直接上代码
<!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="https://www.jb51.net/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" size="10"/> <input type="button" value="加长"/> <input type="button" value="点我"/> <input type="button" value="按钮" /> <p> 只有三次抽奖机会！ </p> <input type="button" value="抽奖"/> <div> </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" value="测试DOM2事件处理"/> <input type="button" 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"/> <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 action="submitPage.htm"> <h3>用户登录</h3> <label for="txtUID">账号：</label> <input type="text"/><br /> <label for="txtPWD">密码：</label> <input type="password"/><br /> <input type="button" 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>div1 <div>div2 <div>div3 </div> </div> </div> </body> </html>
以上这篇JavaScript事件方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: