vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件

发布时间：2020-12-16 23:12:59 所属栏目：百科来源：网络整理

导读：vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件 v-on:click/mouSEOver...... ="" 事件对象: @click/span="show($event)"brspan style="color: #000000;"gt;事件冒泡: 阻止冒泡: a). ev.cancelBubble/span=span style="color: #0000ff;"gt;true/

v-on:click/mouSEOver...... =""

事件对象:
    @click</span>="show($event)"<br><span style="color: #000000;"&gt;
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble</span>=<span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;
        b). @click.stop    推荐<br>
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐<br>
键盘:
    @keydown    $event    ev.keyCode
    @keyup

    常用键:
        回车
            a). @keyup.</span>13<span style="color: #000000;"&gt;
            b). @keyup.enter
        上、下、左、右
            @keyup</span>/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....</pre>

简写的:  @click=""   推荐

> >

事件对象:@click="show($event)"

window.onload='#box'

            },methods:{
                show:</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(ev,b){
                    alert(ev.clientX);
                    alert(b);
                }
            }
        });
    };

<div id="box">
<input type="button" value="按钮" @click="show(<span style="color: #ff0000;">$event,112)">

事件冒泡，
阻止冒泡:
a). ev.cancelBubble=true;

window.onload='#box'1 },show2:2<div id="box">
<div <span style="color: #ff0000;">@click="show2()">
<input type="button" value="按钮" <span style="color: #ff0000;">@click="show($event)">

b). @click.stop 推荐

默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();

window.onload='#box'1 } } }); };

b). @contextmenu.prevent 推荐

="show()">

键盘事件:
@keydown $event ?ev.keyCode

window.onload='#box'); } } }); };

<div id="box">
<input type="text" <span style="color: #ff0000;">@keydown="show(<span style="color: #ff0000;">$event)">

@keyup

window.onload=function(){ new Vue({ el:'#box',methods:{ show:function(ev){ alert(ev.keyCode); } } }); };


="show($event)">

常用键:
1、回车
a). @keyup.13
b). @keyup.enter

window.onload='#box''您按回车了'

    
    ="show()">

2、上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

window.onload='#box'"你按了左箭头←"

="show()">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件