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事件方法(实例讲解)
- Author -
jingxian声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@