JavaScript事件方法(实例讲解)
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇JavaScript事件方法(实例讲解)。长沙网络推广觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
废话不多说,直接上代码
<!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事件绑定!"); /
上一篇:NodeJS自定义模块写法(详解)
下一篇:简单谈谈原生js的math对象