javascript - 事件的定義有無函數的區別
問題描述
<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <title>跨游覽器封裝函數</title></head><body> <h1 onclick='alert(’這是html事件綁定方式1’)'>html事件綁定方式1</h1> <h1 onclick='f1()'>html事件綁定方式2</h1> <h2 onclick='f1()'>dom0級事件綁定方式</h2> <script type='text/javascript'>function f1(){ alert(’這是html事件綁定方式2’);}var h2 = document.getElementsByTagName(’h2’);console.log(h2[0]);h2[0].onclick = function(){ alert(’這是dom0級事件綁定方式’);}h2[0].onclick = 'alert(’這是dom0級事件綁定方式’)'; </script> </body></html>
問題解答
回答1：1.首先h2[0].onclick = 'alert(’這是dom0級事件綁定方式’)';這個寫法你仔細看下就知道是什么意思了！相當于把'alert(’這是dom0級事件綁定方式’)'當成一串字符串賦值給onclick，只是一串字符串，無法起效的！2.然后，<h1 onclick='alert(’這是html事件綁定方式1’)'>html事件綁定方式1</h1>，這個寫法，在html標簽這里綁定的，onclick后面跟著的alert(’這是html事件綁定方式1’),這部分就是函數的內容，就是你點擊了，觸發了事件，就執行的內容。跟<h1 onclick='(function(){alert(’這是html事件綁定方式1’)})()'>html事件綁定方式1</h1>這個寫法是等價的，看了這個寫法就知道是怎么回事了！就是相當于，定義了一個自動執行的匿名函數，而函數執行的內容，就是你寫的alert(’這是html事件綁定方式1’)。3.最后，這個就不多解釋了，這個是原理就是點擊后出發的事件，執行函數而已！
h2[0].onclick = function(){ alert(’這是dom0級事件綁定方式’);}回答2：
第一個行內定義的是DOM元素的attribute，下面訪問DOM.onclick可以看作是訪問的property。
<a onclick='alert(’abc’)'>test</a><script>var a = document.querySelector(’#test’);console.log(a.onclick); // function onclick(event) { alert(’abc’); }a.attributes[’onclick’].value = ’alert(’test’)’;console.log(a.onclick); // function onclick(event) { alert(’test’); }</script>
相關文章：
1. docker 下面創建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？2. 在應用配置文件 app.php 中找不到’route_check_cache’配置項3. html按鍵開關如何提交我想需要的值到數據庫4. css - width設置為100%之后列表無法居中5. ios - vue－cli開發項目webstrom會在stylus樣式報錯，飆紅，請大神幫忙6. javascript - 一個頁面有四個圖片，翻頁的時候想固定住某個圖片然后翻頁，如何實現呢?7. python - 在pyqt中做微信的機器人,要在表格中顯示微信好友的名字,卻顯示不出來,怎么解決?8. html5 - 用Egret寫的小游戲，怎么分享到微信呢？9. css3 - 怎么感覺用 rem 開發的不多啊10. objective-c - 自定義導航條為類似美團的搜索欄樣式
網公網安備