什么是事件
什么是事件对象?
事件对象就是一个系统自动创建的一个对象当注册的事件被触发的时候, 系统就会自动创建事件对象
事件对象的注意点:
在高级版本的浏览器中, 会自动将事件对象传递给回到函数
在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
在低级版本的浏览器中, 需要通过window.event来获取事件对象
- 注册事件
var oBtn=getElementByoId("btn");
oBtn.onclick=function(event){ //传递的就是事件对象
event = event || window.event;//兼容性写法
console.log(event); //Object
}
- 阻止默认的行为（链接跳转）
【注意点】
return false 企业开发推荐
preventDefault方法只支持高级版本的浏览器
event.preventDefault();
event.returnValue = false; // IE9以下的浏览器
let oA = document.querySelector("a");
oA.onclick = function (event) {
// 兼容性的写法
event = event || window.event;
alert("666");
// 阻止默认行为
return false; // 企业开发推荐
// 注意点: preventDefault方法只支持高级版本的浏览器
// event.preventDefault();
// event.returnValue = false; // IE9以下的浏览器
}
添加事件的三种方式
- 通过onXXX的方式来添加
.[注意点:]
由于是给属性赋值, 所以后赋值的会覆盖先赋值 - 通过addEventListener方法添加
注意点:
1.事件名称不需要添加on
2.后添加的不会覆盖先添加的
3.只支持最新的浏览器IE9 - 通过attachEvent方法添加
注意点:
1.事件名称必须加上on
2.后添加的不会覆盖先添加的
3.只支持低版本的浏览器
var oBtn = document.getElementById("btn");
/*
方式一:
1.通过onxxx的方式来添加
注意点: 由于是给属性赋值, 所以后赋值的会覆盖先赋值
*/
oBtn.onclick = function () {
alert("666");
}
oBtn.onclick = function () {
alert("777"); //77会覆盖66
}
/*
方式二:
*/
oBtn.addEventListener("click", function () {
alert("666");
});
oBtn.addEventListener("click", function () {
alert("777"); //不会覆盖666，依次展示
});
/*
方式三
*/
oBtn.attachEvent("onclick", function () {
alert("666");
});
oBtn.attachEvent("onclick", function () {
alert("777");
});
addEvent(oBtn, "click", function () {
alert("666");
})
addEvent(oBtn, "click", function () {
alert("777");
})
//事件方法封装
function addEvent(ele, name, fn) {
if(ele.attachEvent){
ele.attachEvent("on"+name, fn);
}else{
ele.addEventListener(name, fn);
}
}
事件执行的三个阶段
- 事件的三个阶段
1.1 事件捕获阶段
1.2 目标事件阶段
1.3 事件冒泡阶段
【注意点】
三个阶段只有两个会被同时执行
要么捕获和当前, 要么当前和冒泡
-
为什么要么只能是捕获和当前, 要么只能是当前和冒泡?
这是JS处理事件的历史问题
早期各大浏览器厂商为占领市场, 以及对事件的理解不同后续W3C为了兼容, 将两种方式都纳入标准 -
如何设置事件到底是捕获还是冒泡?
通过addEventListener方法, 这个方法接收三个参数
第一个参数: 事件的名称
第二个参数: 回调函数
第三个参数:false冒泡 / true 捕获{注意点】
onXxx的属性, 不接收任何参数, 所以默认就是冒泡
attachEvent方法, 只能接收两个参数, 所以默认就是冒泡
let oFDiv = document.querySelector(".father");
let oSDiv = document.querySelector(".son");
oFDiv.addEventListener("click", function () {
console.log("father");
}, false); //事件冒泡
oSDiv.addEventListener("click", function () {
console.log("son");
}, true);//事件捕获
oFDiv.onclick = function () { //默认为事件冒泡
console.log("father");
}
oSDiv.onclick = function () {
console.log("son");
}
如图为粉色框和绿色框分别添加点击事件
若第三个参数为false则为事件冒泡
若第三个参数为 true 则为事件冒泡
事件冒泡的应用
当点击列表事件时，每一个li绑定不同的点击事件
<style>
*{
margin: 0;
padding: 0;
}
.bulue{
background: #0000FF;
}
ul{
list-style: none;
width: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.father{
margin: 0 auto;lue
width:200px;
height:200px;
background: #008000;
}
.son{
margin: 0 auto;
width:100px;
height:100px;
background: #aa557f;
}
</style>
<body>
<ul>
<li class="bulue">苹果</li>
<li>橘子</li>
<li>柿子</li>
<li>梨</li>
<li>西瓜</li>
</ul>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
/*let oItems = document.querySelectorAll("ul>li");
let currentItem = oItems[0];
for(let item of oItems){
item.onclick = change;
}
//此方法每遍历一个li标签就会给内存开辟一块空间
function change() {
currentItem.className = "";
this.className = "selected";
currentItem = this;
}*/
let oUl = document.querySelector("ul");
let oLi = document.querySelector(".bulue");
oUl.onclick = function (event) { //li会将事件冒泡给ul处理
event=event||window.event;
console.log( event.target); //拿到被点击的li
oLi.className = " "; //清除背景颜色
let item = event.target;
item.className="bulue";
oLi = item; //转存为了清除上一次点击的背景颜色
}
阻止事件冒泡的方法
// 1.拿到需要操作的元素
var oFDiv = document.getElementById("father");
var oSDiv = document.getElementById("son");
// 2.注册事件监听
oFDiv.onclick = function () {
console.log("father");
}
oSDiv.onclick = function (event) {
event = event || window.event;
// 注意点: stopPropagation方法只支持高级浏览器
// event.stopPropagation();
// event.cancelBubble = true; // 低级浏览器
if(event.cancelBubble){
event.cancelBubble = true;
}else{
event.stopPropagation();
}
console.log("son");
}
此外还有以下几种方式阻止事件冒泡
return false; // 企业开发推荐
// 注意点: preventDefault方法只支持高级版本的浏览器
// event.preventDefault();
// event.returnValue = false; // IE9以下的浏览器
Vue中事件冒泡的方法：
<div id="app">
<button onclick="alert(123)">点我</button>
<!-- 注意点：默认情况下事件的回调函数可以反复被执行，只要事件被触发一次就行
如果想让其执行一次，就可使用。once修饰符
-->
<button @click.once="myFn('dxy',18,$event)">点我</button>
<!-- 阻止元素的默认行为，使用prevent修饰符 -->
<a href="https://www.baidu.com" @click.prevent="myFn">我是a标签</a>
<!--
默认情况下，嵌套元素中，如果监听了相同的元素，那么会触发事件冒泡
如果想阻止事件冒泡，.stop修饰符可以搞定
如果想让回调函数只有当前元素触发事件时才执行，那么就可以使用.self修饰符
事件冒泡---》事件捕获，使用@click.capture
-->
<div class="a" @click.capture="myFn1">
<div class="b"@click.capture="myFn2">
<div class="c"@click.capture="myFn3"></div>
</div>
</div>
</div>
-
v-on指令
1. 用于专门给元素绑定监听事件2. 指令格式 v-on：事件名称=“回调函数名称” @事件名称=“回调函数名称” 3. 注意点： 3.1.v-on 绑定事件被触发以后，会去Vue实例对象的methods中查找对应的回调函数 3.2.不需要再指定事件名称的时候写 on 3.3. 在赋值的时候必须赋值一个回调函数的名称 3.4.简写方式：@===v-on： 4. v-on修饰符 在事件中有很多东西需要我们处理，例如 事件冒泡，事件捕获，组织默认行为等 在Vue中如何处理以上内容呢 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。 .left - (2.2.0) 只当点击鼠标左键时触发。 .right - (2.2.0) 只当点击鼠标右键时触发。 .middle - (2.2.0) 只当点击鼠标中键时触发。 .passive - (2.3.0) 以 { passive: true } 模式添加侦听器 5. 常见修饰符 .once - 只触发一次回调。 .prevent - 调用 event.preventDefault()。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .stop - 调用 event.stopPropagation()。 6.注意点： 1.绑定回调函数函数后边的（）可写可不写 @click=“Fn” @click=“Fn（）” 2. 可以给绑定的回调函数传递参数 @click=“Fn（"dxy",18）” 3. 如果在绑定的函数中需要用到data中的数据必须加上this
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
