2. 程式人生 > >js事件流

js事件流

阿新 • • 發佈：2017-10-18
事件冒泡 指定 cancel util detach name prevent sdn details

1.HTML事件處理程序:

JS事件放在HTML裏面。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML事件處理程序</title>
  5. </head>
  6. <body>
  7. <div>
  8. <input type="button" value="按鈕" onclick="show">
  9. </div>
  11. <script type="text/javascript">
  12. function show(){
  13. alert(‘hello world‘)
  14. }
  15. </script>
  16. </body>
  17. </html>


2.DOM0級事件處理程序：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>DOM0級事件處理程序</title>
  5. </head>
  6. <body>
  7. <div id="box">
  8. <input type="button" value="按鈕" id="btn">
  9. </div>
  11. <script type="text/javascript">
  12. var btn=document.getElementById(‘btn‘);
  13. btn.onclick=function(){
  14. alert(‘hello world‘)
  15. }
  17. btn.onclick=null;//取消onclick事件
  18. </script>
  19. </body>
  20. </html>

3.DOM2級事件處理程序
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>DOM2級</title>
  5. </head>
  6. <body>
  7. <div id="box">
  8. <input type="button" value="按鈕" id="btn">
  9. </div>
  10. <script type="text/javascript">
  11. //DOM2級事件定義了兩個方法
  12. //用於處理指定和刪除事件程序的操作
  13. //addEventListener()和removeEventListener()
  14. //接收三個參數：要處理的時間名、事件處理程序、布爾值（true:捕獲階段、false:冒泡階段）
  15. //一個按鈕上可以添加多個事件
  16. var btn=document.getElementById(‘btn‘);
  17. btn.addEventListener(‘click‘,function(){
  18. alert(‘hello world‘);
  19. },false);
  20. //刪除事件的參數必須和添加事件的一樣，
  21. btn.removeEventListener(‘click‘,function(){
  22. alert(‘hello world‘);
  23. },false);
  25. </script>
  26. </body>
  27. </html>


4.IE事件處理程序

[html] view plain copy
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>IE事件處理程序</title>
  5. </head>
  6. <body>
  7. <div id="box">
  8. <input type="button" value="按鈕" id="btn">
  9. </div>
  11. <script type="text/javascript">
  12. //attachEvent()添加事件
  13. //detachEvent()刪除事件
  14. //接收相同的兩個參數：事件名稱、事件程序
  16. var btn=document.getElementById(‘btn‘);
  17. btn.attachEvent(‘onclick‘,function(){
  18. alert(‘hello‘)
  19. });
  20. btn.detachEvent(‘onclick‘,function(){
  21. alert(‘hello‘)
  22. })
  23. </script>
  24. </body>
  25. </html>

5.跨瀏覽器事件處理程序
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>跨瀏覽器事件處理</title>
  5. </head>
  6. <body>
  7. <div id="box">
  8. <input type="button" value="按鈕" id="btn">
  9. </div>
  12. <script type="text/javascript">
  13. function show(){
  14. alert(‘hello‘);
  15. }
  16. var eventUtil={
  17. //添加事件
  18. addHandler:function(element,type,handler){
  19. if(element.addEventListener){
  20. addEventListener(type,handler,false);
  21. }else if(element.attachEvent){
  22. attachEvent(‘on‘+type,handler);
  23. }else{
  24. element[‘on‘+type]=handler;
  25. }
  26. }
  27. //刪除事件
  28. removeHandler:function(element,type,handler){
  29. if(element.removeEventListener){
  30. removeEventListener(type,handler,false);
  31. }else if(element.attachEvent){
  32. detachEvent(‘on‘+type,handler);
  33. }else{
  34. element[‘on‘+type]=null;
  35. }
  36. }
  37. }
  38. eventUtil.addHandler(btn,‘click‘,show);
  39. eventUtil.removeHandler(btn,‘click‘,show);
  40. </script>
  41. </body>
  42. </html>


6.DOM事件對象
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>DOM事件對象</title>
  5. </head>
  6. <body>
  7. <div id="box">
  8. <input type="button" value="按鈕" id="btn">
  9. <a href="http://www.baidu.com" id=‘go‘>跳轉</a>
  10. </div>
  12. <script type="text/javascript">
  13. //1.DOM的事件對象
  14. //(1)type屬性 用於獲取時間類型
  15. //(2)target屬性 用戶獲取事件目標
  16. //(3)stopPropagation()阻止事件冒泡
  17. //(4)preventDefault()阻止默認行為
  20. var btn=document.getElementById(‘btn‘);
  21. var box=document.getElementById(‘box‘);
  22. var go=document.getElementById(‘go‘);
  23. btn.onclick=function(e){
  24. alert(‘btn‘)
  25. e.stopPropagation();
  26. };
  27. box.onclick=function(){
  28. alert(‘box‘)
  29. };
  30. go.onclick=function(e){
  31. e.stopPropagation();
  32. e.preventDefault();
  33. }
  34. </script>
  35. </body>
  36. </html>


7.IE事件對象
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>IE事件對象</title>
    5. </head>
    6. <body>
    8. <div id="box">
    9. <a href="" id="go">跳轉</a>
    10. </div>
    11. <script type="text/javascript">
    12. //1.IE的事件對象
    13. //(1)type屬性 用於獲取時間類型
    14. //(2)srcElement屬性 用戶獲取事件目標
    15. //(3)cancelBubble屬性：true:阻止事件冒泡
    16. //(4)returnValue屬性：flase:阻止默認行為
    17. window.onload=function(){
    18. var go=document.getElementById(‘go‘);
    19. var box=document.getElementById(‘box‘);
    20. eventUtil.addHandler(box,‘click‘,function(){
    21. alert(‘111‘)
    22. })
    23. }
    24. var eventUtil={
    25. //添加事件
    26. addHandler:function(element,type,handler){
    27. if(element.addEventListener){
    28. addEventListener(type,handler,false);
    29. }else if(element.attachEvent){
    30. attachEvent(‘on‘+type,handler);
    31. }else{
    32. element[‘on‘+type]=handler;
    33. }
    34. },
    35. //刪除事件
    36. removeHandler:function(element,type,handler){
    37. if(element.removeEventListener){
    38. removeEventListener(type,handler,false);
    39. }else if(element.attachEvent){
    40. detachEvent(‘on‘+type,handler);
    41. }else{
    42. element[‘on‘+type]=null;
    43. }
    44. },
    46. getEvent:function(event){
    47. return event?event:window.event;
    48. },
    49. getType:function(event){
    50. return event.type;
    51. },
    52. getTarget:function(){
    53. return event.target||event.srcElement
    54. },
    55. preventDefault:function(event){
    56. if(event.preventDefault{
    57. event.preventDefault()
    58. }else{
    59. event.returnValue=false;
    60. }
    61. },
    62. stopPropagation:function(){
    63. if(event.stopPropagation){
    64. event.stopPropagation();
    65. }else{
    66. event.cancelBubble:false;
    67. }
    68. }
    69. }
    70. </script>
    71. </body>
    72. </html>

js事件流

相關推薦

js事件流

事件冒泡 指定 cancel util detach name prevent sdn details 1.HTML事件處理程序: JS事件放在HTML裏面。 <!DOCTYPE html> <html> <head

js 事件流

表示 return nbsp 頻繁 三個參數 阻止 實現 事件捕獲 需要 什麽是事件？ 事件是文檔或瀏覽器窗口發生的一些特定的交互瞬間， 比如 點擊 雙擊 滾動條滑動…… 什麽是事件流？ 事件流指的是 從頁面接收事件的順序。 關於事件流，IE和Netscape提出了差不多相

js事件流 事件捕獲 及時間冒泡詳解

Javascript與HTML之間的互動是通過事件實現。 一、事件流 事件，是文件或瀏覽器視窗中發生的一些特定的互動瞬間。事件流，描述的是頁面中接受事件的順序。IE9，chrome，Firefox，Opera，Safari均實現了DOM2級規範中定義的標準DOM事件，而IE8和IE8以下版本仍然保留專有的

js事件流之事件冒泡的應用----事件委託

什麼是事件委託？ 它還有一個名字叫事件代理。 JavaScript高階程式設計上講： 事件委託就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。 用取快遞來解釋這個現象，大家認真領會一下事件委託到底是一個什麼原理： 有三個同事預計會在週一收到快遞。為簽收快遞，有兩種辦法：一

js事件流之事件冒泡的應用----事件委托

mouseout 目標 呵呵 內存占用 設計 onload end elements bre 什麽是事件委托？ 它還有一個名字叫事件代理。 JavaScript高級程序設計上講： 事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。 用取快遞來解

11.JS-事件流-冒泡、捕獲

事件流： 頁面接受事件的順序  DOM事件流： 當事件發生時，事件會在該元素節點和根節點之間的路徑進行傳播，傳播過程中所遇到的節點都會接受該事件                          冒泡：從最具體元素傳播最不具體的元素                 

JS事件流和事件委託

在上一篇《JS知識點大雜燴》中說到了事件流但沒有詳細的介紹，這篇文章就來介紹一下事件流。 事件流一共由三個階段分別是： 1.捕獲階段 2.目標階段 3.冒泡階段 複製程式碼 事件繫結大家都知道，有DOM0級（on+type）和DOM2級（addEventListener）,我覺得說那麼多概念不好理解，直

js 事件流，事件冒泡機制

事件冒泡：當一個元素接收到事件的時候，會把他接收到的所有傳播給他的父級，一直到頂層window， <!DOCTYPE html> <html>     <head>     &nb

js事件流機制冒泡和捕獲

JavaScript與HTML之間的互動是通過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。 事件流 從頁面中接收事件的順序稱為事件流。 IE --> 事件冒泡流 Netscape --> 事件捕獲流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling)，即事件

js事件流模型

Javascript的事件流模型都有什麼？ “事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

JS事件流（事件冒泡和事件捕獲）

事件流是描述從頁面接收事件的順序。但是有意思的是，IE和Netscape開發團隊提出了差不多完全相反的事件流概念。IE的事件流是事件冒泡流，而Netspace Communicator的事件流是事件捕獲流。 事件冒泡 IE的事件流叫做事件冒泡（event

JS事件流（W3C與IE區別）

一、JS事件的3個階段：捕獲、目標、冒泡，低版本IE不支援捕獲階段； 二、在瀏覽器解析事件的時候，有兩種觸發方式：一種叫做Bubbling(冒泡)，另外一種叫做Capturing(捕獲)。 冒泡的方式效果就是當一個DOM元素的某事件例如click事件

js 事件流的事件冒泡和事件捕獲與阻止事件傳播

head 阻止事件冒泡 觸發 事件冒泡 單擊 期望 就會 簡單的 出現異常 為了方便引入事件流的概念，我們先來說說什麽是事件。 事件就是用戶或瀏覽器自身執行的某種動作。換句話說，我們在瀏覽網頁或者 APP 時，通常會在設備上產生很多交互性的操作，例如點擊、選擇、滾動屏幕、鍵

JS中的事件監聽與事件流

pan 交互 ack 其他 獲得 發生 listen 監聽器 pre 事件監聽： 　　使用監聽器（eventListener）來預定事件，在傳統軟件工程中稱成為觀察者模式 　　執行某種操作時（特定的交互瞬間），會產生對象，對象會沿事件流的方向傳播。 事件流: 　　事件流有

JS的事件綁定、事件流模型

之前 ref div code 鏈接 ntb 參數 nbsp 輸入 .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一、JS事件 （一）JS事件分類 1.鼠標事件：click/dbclick/mo

09-JS的事件流的概念(重點)

listen 事件冒泡 版本 向上 log ID 常用事件 javascrip ava 在學習jQuery的事件之前，大家必須要對JS的事件有所了解。看下文 事件的概念 HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onsc

JS裏關於事件的常被考察的知識點：事件流、事件廣播、原生JS實現事件代理

ace 調用 解綁 用戶 ie8 span 知識點 自帶 sca 1、JS裏面的事件流 　　DOM2級事件模型中規定了事件流的三個階段：捕獲階段、目標階段、冒泡階段，低版本IE（IE8及以下版本）不支持捕獲階段 　　捕獲事件流：Netscape提出的事件流，即事件由頁面元素

js的事件流你真的弄明白了嗎？

版本 false () func chrom ner 瀏覽器 relative 什麽 當瀏覽器發展到第四代時候，瀏覽器開發團隊遇到了一個有意思的問題；頁面的哪一部分會擁有某個特地的事件？要明白這個問題問的是什麽，可以想象畫在紙上的一組同心圓，如果你把手指放在圓心上，那麽你的

JS的事件繫結和事件流模型

一、JS事件 （一）JS事件分類 1.滑鼠事件： click/dbclick/mouseover/mouseout 2.HTML事件： onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.鍵盤事件

深入理解JS的事件繫結、事件流模型

https://www.jb51.net/article/139997.htm 一、JS事件 （一）JS事件分類 1.滑鼠事件： click/dbclick/mouseover/mouseout 2.HTML事件：  onload/onunload/onsubmit/onresize/o