###### tags: `Web` # Javascript Event 使用與等價方法 ## Onclick ### 基本上有這幾種 * javascript - onclick * javascript - addEventListener * JQuery - .live() * JQuery - .on() * JQuery - .click() #### html onclick ```htmlembedded=1 <input type = 'button' onclick="myFunction()" value="Click me."></input> ``` ```javascript=1 function divFunction(){ alert("Hello world"); } ``` <hr> #### javascript addEventListener ```htmlembedded=1 <li class="listyle"> <h class="lh1" onclick="okay(this)">Test List Item</h> <span class="x" onclick="deletethis(this)">X</span> </li> ``` ```css=1 .listyle { display: flex; flex-direction: row; position: relative; left: 10%; border: 1px solid green; background-color: #1e2832; width: 700px; color: white; cursor: pointer; font-size: 40px; user-select: none; transition-duration: 0.3s; } .lh1 { width: 700px; background-color: #1e1e00; transition-duration: 0.3s; } .lh1:hover { background-color: #505050; transition-duration: 0.3s; } .x { padding-left: 15px; width: 50px; background-color: #1e1e1e; transition-duration: 0.3s; } .x:hover { background-color: #960000; transition-duration: 0.3s; } .okay { background-color: #5a0000; text-decoration: line-through; transition-duration: 0.3s; } .okay:hover { background-color: #960000; transition-duration: 0.3s; } ``` ```javascript h.addEventListener('click',(e)=>{ okay(e.target); }); ... x.addEventListener('click',function(){ deletethis(x); }); ... function deletethis(element){ element.parentNode.remove(); } function okay(element){ element.classList.toggle('okay'); } ``` <hr> #### JQuery on方法 ```javascript=1 $('ul').on('click', 'span', function(event) { $(this).parent().fadeOut(1000, function() { $(this).remove(); }); event.stopPropagation(); }); ``` OR ```javascript=1 //有傳遞參數的用法 function greet( event ) { alert( "Hello " + event.data.name ); } $( "button" ).on( "click", { name: "Karl" }, greet ); $( "button" ).on( "click", { name: "Addy" }, greet ); ``` #### Javascript onclick vs addEventListener onclick|addEventListener| -|- 支援的較廣<br>只要有支援javascript的瀏覽器都適用<br>同一個DOM元件，附加兩個以上的事件的時候，事件會被比較晚宣告的覆蓋過去|支援的瀏覽器較少<br>除了較早的IE版本(IE9以前)，可以跨瀏覽器使用<br>同一個DOM元件，附加兩個以上的事件的時候，不會被覆寫<br>p.s. IE9以前必須使用 attachEvent 代替 #### Jquery .on vs .click :::success 基本上.click是.on的簡寫，.on的擴充性較高。 ::: ```htmlmixed=1 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function() { alert("Hello btn111111"); }); $("#btn2").on('click',function(){ alert('Hello btn222222'); }); }); </script> </head> <body> <button id='btn1'>btn1</button><p> <button id='btn2'>btn2</button> </body> </html> ``` [Run此code](https://www.w3schools.com/code/tryit.asp?filename=FF7915I0D5IW) [參考來源](http://sonyvsshadow.pixnet.net/blog/post/458813789-html-%E4%B8%AD-onclick%E7%9A%84%E5%90%84%E7%A8%AE%E8%AE%8A%E5%BD%A2) ## onchange ```javascript document.getElementById("input-img-file").addEventListener('change',(e)=>{ //... }) $("#input-img-file").change(function(){ //... }) ```