資訊專欄INFORMATION COLUMN
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)啟動(dòng)一段。下面是一個(gè)屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一
本文主要簡述了event 對(duì)象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。 1.事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。下面是一個(gè)屬性列表，可將之插入 HTML 標(biāo)簽以定義事件的行為。
看圖：
vue事件前面都是沒有on,例如：
@click="vclick($event)"
圖片素材截圖于w3school
2.鼠標(biāo)/鍵盤屬性說明：上面是屬于event 對(duì)象的屬性
例子：
function box2click(event){
// alert(1);
console.log("box2");
console.log(event);
if(event.altKey){
console.log("事件被觸發(fā)時(shí)候 alt 鍵被按下");
}
}
3.IE屬性
4.標(biāo)準(zhǔn) Event 屬性
type 可以知道是那個(gè)事件類型如
5.標(biāo)準(zhǔn)的Event 方法 6.以前的事件冒泡div 里面放一個(gè)按鈕，給div和按鈕都加上點(diǎn)擊事件
javascript處理方法：
// 以前獲取事件的方式
function btnclick(event){
// alert(1);
console.log("以前的");
console.log(event);
//以前停止事件冒泡的方法
//eventent.stopPropagation();
}
function box2click(event){
// alert(1);
console.log("box2");
console.log(event);
if(event.altKey){
console.log("事件被觸發(fā)時(shí)候 alt 鍵被按下");
}
}
對(duì)比vue 的方式
html 部分：
javascript 部分：
var vm = new Vue({
el:"body",
data () {
return {
msg:"hello"
}
},
methods: {
vclick(event){
// alert("vue click");
console.log(event);
console.log("btn");
//event.stopPropagation();
event.cancelBubble=true;
},
boxClick(event){
// alert("box click");
console.log(event);
}
}
})
阻止冒泡簡寫方式：
html關(guān)鍵部分：
methods 方法部分：
stopClick(){
console.log("stopClick");
}
阻止默認(rèn)事件
html部分：
methods 方法部分：
// 阻止鼠標(biāo)右鍵
menuClick(){
alert("menu");
// event.preventDefault();
}
事件的對(duì)象代碼
鍵盤事件 var vm = new Vue({
el:"body",
methods: {
keydownFnc(event){
console.log(event);
console.log(event.keyCode)
}
}
})
vue 提供了一些常用的方法，例如 @keyup.enter 按回車事件被觸發(fā)。
鍵盤事件的代碼鏈接
其他：
vue1.x 基礎(chǔ)使用（一）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87407.html
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)啟動(dòng)一段。下面是一個(gè)屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對(duì)象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...
摘要：最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時(shí)間總結(jié)一下。文章會(huì)從到的一些說明以及使用，也會(huì)文章中的代碼共享出來。詳細(xì)請(qǐng)關(guān)注后續(xù)。后面陸續(xù)會(huì)換到其他的一些工具，如，等。也會(huì)介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。 最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時(shí)間總結(jié)一下。文章會(huì)從vue1.x 到2.x的一些說明以及使用，也會(huì)文章中的代碼共享出來。詳細(xì)請(qǐng)關(guān)注后續(xù)。 簡介：感慨是會(huì)用到一些第三方的模塊下載工...
摘要：最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時(shí)間總結(jié)一下。文章會(huì)從到的一些說明以及使用，也會(huì)文章中的代碼共享出來。詳細(xì)請(qǐng)關(guān)注后續(xù)。后面陸續(xù)會(huì)換到其他的一些工具，如，等。也會(huì)介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。 最近項(xiàng)目進(jìn)度慢下來了，花點(diǎn)時(shí)間總結(jié)一下。文章會(huì)從vue1.x 到2.x的一些說明以及使用，也會(huì)文章中的代碼共享出來。詳細(xì)請(qǐng)關(guān)注后續(xù)。 簡介：感慨是會(huì)用到一些第三方的模塊下載工...
摘要：溫馨提示這個(gè)項(xiàng)目主要是用來學(xué)習(xí)的，所以我會(huì)不斷建分支重寫，下一個(gè)分支是。更加溫馨的提示已經(jīng)將運(yùn)用在了大型的項(xiàng)目中，反響一流，下一步是轉(zhuǎn)，希望喜歡的同學(xué)堅(jiān)定信念啊。 github-explorer Rebuild with Vue 2.0 源碼地址1.x版本Live DemoReact版 Demo 簡介 之前看到了一個(gè)很有意思的項(xiàng)目，是一位大牛寫的github-explorer。他用的是...
閱讀 2326·2021-09-22 15:27
閱讀 3178·2021-09-03 10:32
閱讀 3506·2021-09-01 11:38
閱讀 2503·2019-08-30 15:56
閱讀 2220·2019-08-30 13:01
閱讀 1543·2019-08-29 12:13
閱讀 1425·2019-08-26 13:33
閱讀 899·2019-08-26 13:30
