JavaScript HTML DOM 事件
前端笔记 2016-11-01 09:31:05

这段的javascript挺不错的，可以像JQ一样选择指定的dom

JavaScript Code复制内容到剪贴板
  1. <div class="dustbin"><br />垃<br />圾<br />箱</div>  
  2. <div class="dragbox">  
  3.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表1</div>  
  4.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表2</div>  
  5.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表3</div>  
  6.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表4</div>  
  7.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表5</div>  
  8.     <div class="draglist" name="draglist" title="拖拽我" draggable="true">列表6</div>  
  9. </div>  
  10. <div class="dragremind"></div>  
  11.   
  12.   
  13. <script>  
  14. var $ = function(selector) {  
  15.         if (!selector) { return []; }  
  16.         var arrEle = [];  
  17.         if (document.querySelectorAll) {  
  18.             arrEle = document.querySelectorAll(selector);  
  19.         } else {  
  20.             var oAll = document.getElementsByName("draglist"), lAll = oAll.length;  
  21.             if (lAll) {  
  22.                 var i = 0;  
  23.                 for (i; i<lAll; i+=1) {  
  24.                     if (/^\./.test(selector)) {  
  25.                         if (oAll[i].className === selector.replace(".", "")) {  
  26.                             arrEle.push(oAll[i]);  
  27.                         }  
  28.                     } else if(/^#/.test(selector)) {  
  29.                         if (oAll[i].id === selector.replace("#", "")) {  
  30.                             arrEle.push(oAll[i]);  
  31.                         }  
  32.                     }  
  33.                 }  
  34.             }  
  35.         }  
  36.         // 获取指定的dom  
  37.         return arrEle;  
  38.     };  
  39.   
  40. var eleDustbin = $(".dustbin")[0],  
  41. eleDrags = $(".draglist"),  
  42. eleRemind = $(".dragremind")[0];  
  43. </script>  

 

 

HTML DOM addEventListener() 方法

XML/HTML Code复制内容到剪贴板
  1. <button id="myBtn">点我</button>  
  2. <script>  
  3. document.getElementById("myBtn").addEventListener("click", function(){    
  4.     document.getElementById("demo").innerHTML = "Hello World";    
  5. });  
  6. </script>  

 


提示:可以修改后运行.

定义和用法

addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

 

 

使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.   
  7. <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>  
  8.   
  9. <button id="myBtn">点击这里</button>  
  10.   
  11. <script>  
  12. document.getElementById("myBtn").onclick=function(){displayDate()};  
  13. function displayDate()  
  14. {  
  15. document.getElementById("demo").innerHTML=Date();  
  16. }  
  17. </script>  
  18.   
  19. <p id="demo"></p>  
  20.   
  21. </body>  
  22. </html>   

 


提示:可以修改后运行.

 

 

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

XML/HTML Code复制内容到剪贴板
  1. <body onload="checkCookies()">  
  2.   
  3. <script>  
  4. function checkCookies()  
  5. {  
  6. if (navigator.cookieEnabled==true)  
  7.     {  
  8.     alert("已启用 cookie")  
  9.     }  
  10. else  
  11.     {  
  12.     alert("未启用 cookie")  
  13.     }  
  14. }  
  15. </script>  

提示:可以修改后运行.

 

 

 

onchange 事件
onchange 事件常结合对输入字段的验证来使用。输入英文字符
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. function myFunction()  
  3. {  
  4. var x=document.getElementById("fname");  
  5. xx.value=x.value.toUpperCase();  
  6. }  
  7. </script>  
  8.   
  9. 请输入英文字符：<input type="text" id="fname" onchange="myFunction()">  
  10.   
  11. <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>  

提示:可以修改后运行.

 

 

 

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

XML/HTML Code复制内容到剪贴板
  1. <div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>  
  2.   
  3. <script>  
  4. function mOver(obj)  
  5. {  
  6. obj.innerHTML="谢谢"  
  7. }  
  8.   
  9. function mOut(obj)  
  10. {  
  11. obj.innerHTML="把鼠标移到上面"  
  12. }  
  13. </script>  

提示:可以修改后运行.

 

 

 

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

XML/HTML Code复制内容到剪贴板
  1. <div onmousedown="mDown(this)" onmouseup="mUp(this)">请点击这里</div>  
  2.   
  3. <script>  
  4. function mDown(obj)  
  5. {  
  6. obj.style.backgroundColor="#1ec5e5";  
  7. obj.innerHTML="请释放鼠标按钮"  
  8. }  
  9.   
  10. function mUp(obj)  
  11. {  
  12. obj.style.backgroundColor="green";  
  13. obj.innerHTML="请按下鼠标按钮"  
  14. }  
  15. </script>  

提示:可以修改后运行.

 

 

 

 

XML/HTML Code复制内容到剪贴板
  1. <script>  
  2. function myFunction(x)  
  3. {  
  4. x.style.background="yellow";  
  5. }  
  6. </script>  
  7.   
  8.   
  9. 请输入英文字符：<input type="text" onfocus="myFunction(this)">  
  10.   
  11. <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>  

提示:可以修改后运行.

 

 

XML/HTML Code复制内容到剪贴板
  1. <h1 onclick="changetext(this)">请点击该文本</h1>  
  2. <script>  
  3. function changetext(id)  
  4. {  
  5. id.innerHTML="谢谢!";  
  6. }  
  7. </script>  
  8.   
  9.   
  10. <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>  
  11.   
  12. <h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">请把鼠标移到这段文本上</h1>  

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/46.html

上一篇 JS笔记
下一篇 jQuery倒计时插件6种不同倒计时效果代码
相关的文章
Powered by yoyo苏ICP备15045725号