## uni-app 事件 **事件映射表，左側為 WEB 事件，右側為 ``uni-app`` 對應事件** { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll' } 在 input 和 textarea 中 change 事件會被轉為 blur 事件。 ## 踩坑注意： 上列表中沒有的原生事件也可以使用，例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區分到底是什么事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map> 平臺差異所致，bind 和 catch 事件同時綁定時候，只會觸發 bind ,catch 不會被觸發，要避免踩坑。 ## 事件修飾符 stop 的使用會阻止冒泡，但是同時綁定了一個非冒泡事件，會導致該元素上的 catchEventName 失效！ prevent 可以直接干掉，因為uni-app里沒有什么默認事件，比如 submit 并不會跳轉頁面 self 沒有可以判斷的標識 once 也不能做，因為uni-app沒有 removeEventListener, 雖然可以直接在 handleProxy 中處理，但非常的不優雅，違背了原意，暫不考慮 按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。 ## 事件綁定 @click ``` <template> <view class="demo" @click="clickTest" @longtap="longtap"></view> </template> <script> export default { methods:{ clickTest: function(e){ console.log(e); console.log('click'); }, longtap: function(e){ console.log(e); console.log('longtap'); } } } </script> <style> .demo{width:500px; margin:50px auto; background:#8F8F90; height:500px;} </style> ``` 注意在小程序中觀察對應事件對象，可以利用此對象獲取更多信息。 ## 事件傳參（動態參數演示） ``` <template> <view> <view class="uni-list"> <view class="uni-list-cell" v-for="(item,index) in students" :key="index"> <view class="uni-list-cell-navigate uni-navigate-right" @click="menuClick" v-bind:id="index"> {{index}} - {{item.name}} </view> </view> </view> </view> </template> <script> export default { data: { students : [ {name : "張三", age : 18}, {name : "李四", age : 20} ] }, methods:{ menuClick : function(e){ console.log(e); console.log(e.target.id); } }, } </script> <style> .persons{width:750px; line-height:2.2em;} </style> ```