何为默认事件?比如 a 会跳转页面,submit 会提交表单等。
e.preventDefault()函数。
<a href="http://www.baidu.com" onclick="stopDef(event)">百度</a>
function stopDef(e){
e.preventDefault();
}
.prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件
<div id="app">
<a href="http://www.baidu.com" @click.prevent="vueStopDef()">百度</a></div>
window.onload = function(){ new Vue({
el:"#app",
methods:{
vueStopDef(){ console.log("vue.js通过 .prevent 阻止默认事件")
}
}
});
}
何为事件冒泡?执行下段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1 {
width: 500px;
height: 500px;
border: 1px solid black;
}
.div2 {
width: 400px;
height: 400px;
border: 1px solid black;
}
.div3 {
width: 300px;
height: 300px;
border: 1px solid black;
}
.div4 {
width: 200px;
height: 200px;
border: 1px solid black;
}
.div5 {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<script src="../js/vue.js"></script>
<script>
function fun01() {
console.log("点击了div1");
};
function fun02() {
console.log("点击了div2");
};
function fun03() {
console.log("点击了div3");
};
function fun04() {
console.log("点击了div4");
};
function fun05() {
console.log("点击了div5");
};
</script>
</head>
<body>
<div class="div1" onclick="fun01()">
<div class="div2" onclick="fun02()">
<div class="div3" onclick="fun03()">
<div class="div4" onclick="fun04()">
<div class="div5" onclick="fun05()">
div05 </div>
div04 </div>
div03 </div>
div02 </div>
div01 </div>
</body>
</html>
当点击div05时,同时按顺序触发 div05、div04、div03、div02、div01;当点击div03的时候 ,同时按顺序出发div03、div02、div01 等。从内层div一层一层触发外层div事件,这种现象就是事件冒泡。
e.stopPropagation()。上述代码中,在定义fun05()改成fun05(e),同时在方法中加入e.stopPropagation()。在调用是 onclick=“fun05(event)”。当点击div05时,不会冒泡触发外层事件。
.stop 是vue 的内置修饰符 调用了 e.stopPropagation()。阻止冒泡事件发生。下段代码中div5和div3出发点击事件时使用 .stop ,阻止冒泡事件发生。当点击div05 活着div03时,不会触发冒泡事件。
<div id="app" class="div1" @click="fun01">
<div class="div2" @click="fun02">
<div class="div3" @click.stop="fun03">
<div class="div4" @click="fun04">
<div class="div5" @click.stop="fun05">
div05 </div>
div04 </div>
div03 </div>
div02 </div>
div01</div>
window.onload = function (){ new Vue({
el:"#app",
methods:{
fun01(){ console.log("点击了div1");
},
fun02(){ console.log("点击了div2");
},
fun03(){ console.log("点击了div3");
},
fun04(){ console.log("点击了div4");
},
fun05(){ console.log("点击了div5");
}
}
});
}
但是,还是有点问题,上段代码运行后,因为对div5 和div3阻止了冒泡事件。但是,当点击div4 的时候,div4发生冒泡事件,同时出发了div3的点击事件(后面的被div阻止了)。也就是说,即使自己本身使用.stop阻止冒泡事件(不去触发外层事件),但是自身还是会被其它(内层事件)触发。这个时候,就需要 .self。
.self 是vue 的内置修饰符 对于所指定的元素 只有当前元素本身可以触发事件,修饰符可以连写。即,将上段代码div3绑定事件改为
<div @click.stop.self="fun03">
此时,能出发 div3 的点击事件只有在点击div3时这一种情况。
其实只有 <body>、<frame>、<iframe>、<img>、<link>、<script>、<style> 这些标签才有onload事件,而div、p等标签是没有的。但如果我们还是想在div append到DOM时做一些事情该怎么办呢?
DOM中的事件模拟三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:UIEvents(DOM3中的UIEvent)鼠标和键盘事件
事件是用户或浏览器自身执行的某种行动(如click、mousemove等)。而处理对应事件的程序称为事件处理程序(或事件监听器)。
vue 的 emit 和mixins 两个特性是这篇文章的基础,当然抛开vue 也可以直接使用全局调用实现,所以这块不做讨论
在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出!split() 方法用于把一个字符串分割成字符串数组。
load页面加载完成时触发,beforeunload窗口关闭之前触发,unload窗口关闭时触发,focus窗口得到焦点时触发,blur窗口失去焦点时触发,error页面上有脚本报错时触发
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件
jQuery 事件方法:事件方法触发或将函数附加到所选元素的事件处理程序。下表列出了用于处理事件的所有jQuery方法。blur()附加/触发模糊事件;change()附加/触发更改事件
前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等
利用原生JS实时监听input框输入值,原生JS中可以使用oninput,onpropertychange,onchange,oninput,onpropertychange,onchange的用法
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!