<!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="加长" οnclick="changeSize()"/> <input type="button" value="点我" οnclick="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 οnclick="this.style.backgroundColor='red'; event.cancelBubble=true;">div1 <div οnclick="this.style.backgroundColor='blue';">div2 <div οnclick="this.style.backgroundColor='black';">div3 </div> </div> </div></body></html>
转载于:https://www.cnblogs.com/cyyly/p/7082250.html
