1.0 put ext head button name tel als
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script type="text/javascript">
- /*
- window.onload = function () {
- alert('onload');
- }
- window.onfocus = function () {
- alert('onfocus');
- }
- window.onblur = function () {
- alert('onblur');
- }
- window.onscroll = function () {
- alert('onscroll');
- }
- window.onresize = function () {
- alert('onresize');
- }
- */
- </script>
- <script type="text/javascript">
- var msg = "";
- var myAlert = function () {
- msg += " Click Event End\n";
- alert(msg);
- }
- </script>
- </head>
- <body
- onclick="javascript:msg+='-->Body Event';myAlert();">
- <table border="1"
- onclick="javascript:msg+='-->Table Event';myAlert();event.cancelBubble=true;">
- <tr
- onclick="javascript:msg+='-->TR Event';myAlert();">
- <td
- onclick="javascript:msg+='-->TD Event';myAlert();">
- 我是单元格
- <p
- onclick="javascript:msg+='-->P Event';myAlert();">
- 我是段落
- </p>
- </td>
- </tr>
- </table>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="Scripts/EventUtil.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- var $ = function(id) {
- return document.getElementById(id);
- }
- var changeSize = function(id, size, obj) {
- var inp = $(id);
- obj.value += size;
- inp.size += size;
- }
- var onclickEvent = function() {
- alert("提交内容" + $('MyButton').value);
- }
- </script>
- </head>
- <body>
- <input type="text" id="txt" size="15" />
- <input type="button" value="加长" onclick="changeSize('txt',30,this);" />
- <center>
- <br>
- <p>
- 单击"事件测试"按钮,通过匿名函数处理事件
- </p>
- <form name="myForm" id="myForm">
- <input type="button" name="myButton" id="myButton" value="事件测试">
- </form>
- <script type="text/javascript">
- /*
- $("myButton").onclick = function () {
- alert('myButton onclick');
- };
- */
- //$("myButton").onclick = onclickEvent;
- /*
- $("myButton").addEventListener('click'
- , function () {
- alert("first click Event");
- }, false);
- $("myButton").addEventListener('click'
- , function () {
- alert("second click Event");
- }, false);
- $("myButton").addEventListener('click'
- , function () {
- alert("third click Event");
- }, false);
- */
- EventUtil.addHandler($("myButton"), 'click',
- function() {
- alert("I am compatible1 click Event");
- });
- EventUtil.addHandler($("myButton"), 'click',
- function() {
- alert("I am compatible2 click Event");
- });
- </script>
- </center>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="Scripts/EventUtil.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- var $ = function(id) {
- return document.getElementById(id);
- }
- var changeSize = function(id, size, obj) {
- var inp = $(id);
- obj.value += size;
- inp.size += size;
- }
- var onclickEvent = function() {
- alert("提交内容" + $('MyButton').value);
- }
- </script>
- </head>
- <body>
- <input type="text" id="txt" size="15" />
- <input type="button" value="加长" onclick="changeSize('txt',30,this);" />
- <center>
- <br>
- <p>
- 单击"事件测试"按钮,通过匿名函数处理事件
- </p>
- <form name="myForm" id="myForm">
- <input type="button" name="myButton" id="myButton" value="事件测试">
- </form>
- <script type="text/javascript">
- /*
- $("myButton").onclick = function () {
- alert('myButton onclick');
- };
- */
- //$("myButton").onclick = onclickEvent;
- /*
- $("myButton").addEventListener('click'
- , function () {
- alert("first click Event");
- }, false);
- $("myButton").addEventListener('click'
- , function () {
- alert("second click Event");
- }, false);
- $("myButton").addEventListener('click'
- , function () {
- alert("third click Event");
- }, false);
- */
- EventUtil.addHandler($("myButton"), 'click',
- function() {
- alert("I am compatible1 click Event");
- });
- EventUtil.addHandler($("myButton"), 'click',
- function() {
- alert("I am compatible2 click Event");
- });
- </script>
- </center>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <style type="text/css">
- .whiteStar
- {
- float:left;
- width:64px;
- height:64px;
- background-image:url(/Images/starwhite.png)
- }
- .blueStar
- {
- float:left;
- width:64px;
- height:64px;
- background-image:url(/Images/starblue.png)
- }
- </style>
- <script type="text/javascript">
- var $ = function (id) {
- return document.getElementById(id);
- }
- </script>
- </head>
- <body>
- <div id="div1" class="whiteStar"></div>
- <div id="div2" class="whiteStar"></div>
- <div id="div3" class="whiteStar"></div>
- <div id="div4" class="whiteStar"></div>
- <div id="div5" class="whiteStar"></div>
- <script type="text/javascript">
- //星星1
- $('div1').onmouseover = function () {
- $('div1').className = 'blueStar';
- };
- $('div1').onmouseout = function () {
- $('div1').className = 'whiteStar';
- };
- //星星2
- $('div2').onmouseover = function () {
- $('div1').className = 'blueStar';
- $('div2').className = 'blueStar';
- };
- $('div2').onmouseout = function () {
- $('div1').className = 'whiteStar';
- $('div2').className = 'whiteStar';
- };
- //星星3
- $('div3').onmouseover = function () {
- $('div1').className = 'blueStar';
- $('div2').className = 'blueStar';
- $('div3').className = 'blueStar';
- };
- $('div3').onmouseout = function () {
- $('div1').className = 'whiteStar';
- $('div2').className = 'whiteStar';
- $('div3').className = 'whiteStar';
- };
- //星星4
- $('div4').onmouseover = function () {
- $('div1').className = 'blueStar';
- $('div2').className = 'blueStar';
- $('div3').className = 'blueStar';
- $('div4').className = 'blueStar';
- };
- $('div4').onmouseout = function () {
- $('div1').className = 'whiteStar';
- $('div2').className = 'whiteStar';
- $('div3').className = 'whiteStar';
- $('div4').className = 'whiteStar';
- };
- //星星5
- $('div5').onmouseover = function () {
- $('div1').className = 'blueStar';
- $('div2').className = 'blueStar';
- $('div3').className = 'blueStar';
- $('div4').className = 'blueStar';
- $('div5').className = 'blueStar';
- };
- $('div5').onmouseout = function () {
- $('div1').className = 'whiteStar';
- $('div2').className = 'whiteStar';
- $('div3').className = 'whiteStar';
- $('div4').className = 'whiteStar';
- $('div5').className = 'whiteStar';
- };
- </script>
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="Scripts/EventUtil.js" type="text/javascript">
- </script>
- <script src="Scripts/KeyCodeList.js" type="text/javascript">
- </script>
- </head>
- <body>
- <input type="text" id="txt" />
- <script type="text/javascript">
- var objTxt = document.getElementById('txt');
- EventUtil.addHandler(objTxt, 'keypress',
- function() {
- var event = EventUtil.getEvent();
- alert(keyCodeList[event.keyCode]);
- });
- </script>
- </body>
- </html>
- var keyCodeList = {
- 65: 'A',
- 66: 'B',
- 67: 'C',
- 68: 'D',
- 69: 'E',
- 70: 'F',
- 71: 'G',
- 72: 'H',
- 73: 'I'
- //...
- }
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="Scripts/EventUtil.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- var doClick = function(id) {
- var btn = document.getElementById(id);
- alert(btn.value);
- }
- window.onload = function() {
- var oBtn1 = document.getElementById('btn1');
- EventUtil.addHandler(oBtn1, 'click',
- function() {
- alert(oBtn1.value)
- });
- //document.write(myClass.name);
- //document.write(myClass.name1());
- //myClass.action();
- }
- var myClass = {
- name: 'Nick.Chung',
- name1: function() {
- return'Nick.Chung';
- },
- action: function() {
- alert('eating...');
- }
- };
- </script>
- </head>
- <body>
- <input type="text" id="btn1" value="button1" />
- <input type="button" id="btn1" value="button1" onclick="doClick('btn1')"
- />
- <input type="button" id="btn3" value="button3" />
- <input type="button" id="btn4" value="button4" />
- <input type="button" id="btn5" value="button5" />
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <!--引入兼容事件类-->
- <script src="Scripts/EventUtil.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- //当HTML文档内容加载完成
- window.onload = function() {
- //获取按钮对象
- var oBtn = document.getElementById('btn');
- //获取复选框对象
- var oChk = document.getElementById('chk');
- //为复选框添加单击事件
- EventUtil.addHandler(oChk, 'click',
- function() {
- //如果复选框选中了
- if (oChk.checked) {
- //禁用按钮
- oBtn.disabled = true;
- } else {
- //没选中则启动按钮
- oBtn.disabled = false;
- }
- })
- }
- </script>
- </head>
- <body>
- <input type="checkbox" id="chk" />
- 禁用按钮
- <br />
- <br />
- <input type="button" id="btn" disabled="disabled" value="我是按钮" />
- </body>
- </html>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script src="Scripts/EventUtil.js" type="text/javascript"></script>
- <script type="text/javascript">
- window.onload = function () {
- var oBtn1 = document.getElementById('btn1');
- var oBtn2 = document.getElementById('btn2');
- var oBtn3 = document.getElementById('btn3');
- var oBtn4 = document.getElementById('btn4');
- var oBtn5 = document.getElementById('btn5');
- EventUtil.addHandler(
- oBtn1,
- 'click',
- function () {
- var o = EventUtil.getEvent().srcElement;
- alert(o.value);
- });
- EventUtil.addHandler(
- oBtn2,
- 'click',
- function () {
- var o = EventUtil.getEvent().srcElement;
- alert(o.value);
- });
- EventUtil.addHandler(
- oBtn3,
- 'click',
- function () {
- var o = EventUtil.getEvent().srcElement;
- alert(o.value);
- });
- EventUtil.addHandler(
- oBtn4,
- 'click',
- function () {
- var o = EventUtil.getEvent().srcElement;
- alert(o.value);
- });
- EventUtil.addHandler(
- oBtn5,
- 'click',
- function () {
- var o = EventUtil.getEvent().srcElement;
- alert(o.value);
- });
- }
- </script>
- </head>
- <body>
- <input type="button" id="btn1" value="button1" />
- <input type="button" id="btn2" value="button2" />
- <input type="button" id="btn3" value="button3" />
- <input type="button" id="btn4" value="button4" />
- <input type="button" id="btn5" value="button5" />
- </body>
- </html>
JavaScript 事件案例
来源: http://www.bubuko.com/infodetail-2139587.html