方式一:用on綁定事件html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById("box"); box.onclick = function(){ alert(1); alert(2); }; </script> </body> </html>
方式二:用addEventListener進行事件偵聽,也能起到綁定事件的做用。瀏覽器
addEventListener函數
第一個參數:事件名 (click、mouseover...) 注意:事件名不加on 第二個參數:綁定的函數 (有名函數、匿名函數) 第三個參數: 是否捕獲 默認值:false 能夠爲一個元素的同一個事件名 綁定上多個處理函數
點擊查看效果以及代碼,codepen中也有console能夠查看spa
如下是完整代碼code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="box"></div> <script> var div=document.getElementById("box"); div.onclick=function () { alert(1); alert(2); console.log("3"); }; //傳入匿名函數 div.addEventListener("click",function () { console.log("click-4"); }); //傳入匿名函數 div.addEventListener("click",function () { console.log("click-5"); }); //傳入匿名函數 div.addEventListener("mouseover",function () { console.log("mouseover-1"); }); function fn() { console.log("click-6"); } //傳入的是有名函數 div.addEventListener("click",fn); </script> </body> </html>
事件解綁:htm
(1)經過用on綁定的事件,只須要爲事件 從新賦值 便可。 (2)經過addEventListener綁定的事件,須要用removeEventListener();來解綁。 第一個參數:事件名 第二個參數:解綁的函數名(若是是匿名函數,沒法解綁。通常使用有名函數傳參。) 第三個參數:是否捕獲,默認值false。
點擊查看事件解綁效果!!! blog
如下是部分核心代碼:seo
<body> <div id="box"></div> <script> var box=document.getElementById("box"); function fn() { console.log("addEventListener-1"); } //用on進行事件綁定 box.onclick=function () { console.log("addEventListener-1"); }; //針對on的綁定而解綁,將不會打印出1。由於已經解綁了 box.onclick=null; //用addEventListener,傳入的是有名函數 綁定。 box.addEventListener("click",fn); //針對addEventListener,而且使用的是有名函數 的綁定而解綁 box.removeEventListener("click",fn); //用addEventListener,傳入的是匿名函數 綁定。 box.addEventListener("click",function () { console.log("addEventListener-2"); }); //針對addEventListener,而且使用的匿名函數 的綁定而解綁,解綁無效。 //依舊打印addEventListener-2 box.removeEventListener("click",function () { console.log("addEventListener-2"); }); </script> </body>
事件流的三個階段:事件
(1)捕獲階段 從 最外層元素 開始 向目標 進行查找的階段, 而且 同時執行 該階段中 全部 被查找的元素 的 捕獲階段綁定的事件 (2)處於目標階段 觸發 目標元素的 對應事件 (3)冒泡階段 從 目標元素 開始 逐漸往 外層 查找, 而且 同時執行 該階段中 全部 被查找的元素 的 冒泡階段綁定的事件。
如下是所有代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #red{ height: 400px; padding: 100px; background:red; } #blue{ height: 200px; padding: 100px; background:blue; } #yellow{ height: 100px; padding: 50px; background:yellow; } </style> </head> <body> <div id="red"> <div id="blue"> <div id="yellow"></div> </div> </div> <script> var red=document.getElementById("red"); var blue=document.getElementById("blue"); var yellow=document.getElementById("yellow"); //用on綁定的事件是冒泡事件 red.onclick=function () { console.log("red") }; blue.onclick=function () { console.log("blue") }; yellow.onclick=function () { console.log("yellow") }; //用addEventListener綁定的 而且第三個參數是true 是捕獲事件 red.addEventListener("click",function () { console.log("add-red-true") },true); blue.addEventListener("click",function () { console.log("add-blue-true") },true); yellow.addEventListener("click",function () { console.log("add-yellow-true") },true); //用addEventListener綁定的 而且第三個參數是false 是冒泡事件 red.addEventListener("click",function () { console.log("add-red-false") },false); blue.addEventListener("click",function () { console.log("add-blue-false") },false); yellow.addEventListener("click",function () { console.log("add-yellow-false") },false); </script> </body> </html>
以上代碼點擊黃色的結果。
經過 on 進行綁定 經過 event.cancelBubble = true;阻止冒泡 經過 addEventListener進行綁定 經過 event.stopPropagation();阻止冒泡
以上兩種其中一種,方式均可以阻止不一樣綁定方式的冒泡。
如下代碼能夠粘貼運行看看效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #red{ height: 200px; padding:100px; background: red; } #green{ height: 150px; background: green; } </style> </head> <body> <div id="red"> <div id="green"></div> </div> <script> var red=document.getElementById("red"); var green=document.getElementById("green"); document.onclick=function () { console.log("document"); }; red.onclick=function () { console.log("red"); //event.cancelBubble=true; }; green.onclick=function () { console.log("green"); //event.cancelBubble=true; } //------------------------------------------------- document.addEventListener("click",function () { console.log("addEventListener-document"); }); red.addEventListener("click",function () { console.log("addEventListener-red"); //event.stopPropagation(); }); green.addEventListener("click",function () { console.log("addEventListener-green"); event.stopPropagation(); }) </script> </body> </html>
瀏覽器默認行爲
瀏覽器默認爲咱們提供的功能 好比頁面跳轉,右鍵菜單,文字拖動,圖片拖動
阻止默認行爲
有兩種方式 (1)return false; (2)event.preventDefault();
<body> <div id="box">你好你好啊你好 <a id="a" href="http://www.baidu.com">百度</a> </div> <script> var box=document.getElementById("box"); var a=document.getElementById("a"); a.onclick=function () { //return false;//方法一 event.preventDefault();//方法二 } </script> </body>
注意事項:
通常儘量使用event.preventDefault阻止默認樣式。由於return false;方法在jQuery中,此方法不只會阻止默認行爲,還會阻止冒泡。至關於同時調用了preventDefault和stopPropagation方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #menu { width: 100px; background-color: cornflowerblue; color: #fff; padding: 20px; display: none; position: absolute; left: 0; top: 0; margin: 0; } </style> </head> <body> <ul id="menu"> <li>複製</li> <li>粘貼</li> <li>剪切</li> <li>另存</li> </ul> <script> var menu = document.getElementById("menu"); document.oncontextmenu = function(){ menu.style.display = "block"; menu.style.left = event.clientX + "px"; menu.style.top = event.clientY + "px"; event.preventDefault(); } document.onclick = function(){ menu.style.display = "none"; } </script> </body> </html>