js的委托事件----Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<div style="width: 500px;height: 300px;border: 2px solid tomato;border-radius: 5px;margin: 100px auto;padding: 20px;">
<ul id="oul" style="margin: 0;padding: 0;width: calc(100% - 20px);height: calc(100% - 20px);border: 2px solid gray;border-radius: 5px;padding: 10px;">
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_1</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_2</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_3</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_4</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_5</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_6</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_7</li>
<li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_8</li>
</ul>
</div>
<script type="text/javascript">
var oul = document.getElementById('oul'); //不使用事件委托方式
var this_li = oul.getElementsByTagName('li');
for (var i = 0; i<this_li.length; i++) {
this_li[i].onclick = function (ev) {
console.log(this.innerHTML);
}
}
------------- 使用委托方法 -------------------
var oul = document.getElementById('oul'); //使用事件委托方式
oul.onclick = function (ev) {
console.log(ev)
var ev = ev || window.event;
console.log(ev.target)
var target = ev.target || evsrcElement; // 获取节点
console.log(target)
if(target.nodeName.toLowerCase() == 'li'){ //nodeName的意思获得DOM元素的节点名称 //toLowerCase()的方法用以是，把获取到的节点名称转换为小写 也可以直接用localName
console.log(target.innerHTML)
}
}
</script>
</body>
</html>
在vue中实现事件委托
========
一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
2、DOM 事件流：冒泡事件流、捕获事件流。
3、DOM 事件模型：捕获、目标、冒泡。
那什么是事件委托呢？
事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。
二、事件委托的优点：
那为什么要使用事件委托？事件委托有什么好处，以及使用时要注意什么？
事件委托大概有两个优点：
1、提高网页性能。
2、通过事件委托添加的事件，对后期生成的元素依然有效。
上面提到的第二点如何理解呢？
举个例子：现在页面上有个 ul，ul 里有三个 li，通过循环给每个 li 添加点击事件，发现三个 li 到可以正常触发点击事件了，然后通过 js 代码在 ul 里插入（append）两个 li，
再试着点击所有 li，发现前面三个 li 正常触发点击事件，后面新添加的两个 li 无法正常触发点击事件。
参考链接（https://blog.csdn.net/zjsfdx/article/details/78235131）
========
在父元素上绑定点击事件
<div class="panel" @click="rowClick1($event)">
<li>1</li>
<li>2</li>
<li>3</li>
<a href="#"></a>
</div>
使用e.target可以获得点击时获取的所有属性与值,我们可以通过e.target.localName获取点击的标签名,来进行对比判断,相同则触发绑定事件
<script>
rowClick1(e){
console.log(e.target);
if(e.target.localName === 'li'){
console.log("触发事件1");
}else if(e.target.localName === 'a'){
console.log("触发事件2");
}
},
</script>
js的委托事件----Vue的更多相关文章
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- Vue.js：事件处理器
ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...
- JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理
1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段 捕获事件流:Netscape提出的事件流,即事件由页面元素 ...
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js？
在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS.在这篇文章中,我将 ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
随机推荐
- [ASP.NET Core 3框架揭秘] 依赖注入[9]：实现概述
<服务注册>.<服务消费>和<生命周期>主要从实现原理的角度对.NET Core的依赖注入框架进行了介绍,接下来更进一步,看看该框架的总体设计和实现.在过去的多个版 ...
- Linux服务器部署.Net Core笔记：二、安装FTP
1.安装 安装ftp:yum install -y vsftpd 将ftp设置开机启动:systemctl enable vsftpd.service 2.配置 安装好后在ftp配置文件里进行配置 : ...
- js获取当前时间的年月日时分秒以及时间的格式化
1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear( ...
- 南邮CTF - Writeup
南邮CTF攻防平台Writeup By:Mirror王宇阳 个人QQ欢迎交流:2821319009 技术水平有限~大佬勿喷 ^_^ Web题 签到题: 直接一梭哈-- md5 collision: 题 ...
- ORA-07217 environment variable cannot be evaluated
问题描述:还是rman的问题,一个很沙雕的问题,改了半天,准备是要做数据库的全备,和归档的备份 1.连接rman进行备份,这里要保持数据库为mount状态,因为要对数据库全备 [oracle@orcl ...
- python基础之字符串讲解（上）
字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或者")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.For example: 为str输入一个变量,p ...
- leetcode——二分
(1)4. 寻找两个有序数组的中位数(中) https://leetcode-cn.com/problems/median-of-two-sorted-arrays/ 给定两个大小为 m 和 n 的有 ...
- 从微信小程序开发者工具源码看实现原理（三）- - 双线程通信
文章概览: 引言 小程序开发者工具双线程通信的设计 1.on: 用来收集小程序开发者工具触发的事件回调 2.invoke:以api方式调用开发工具提供的基础能力 3.publish:用来向Appser ...
- [Codeforces 1244C] The Football Season
思维加枚举 题意 :足球赛,赢平所得到的分数分别为w和d,w>d,分别求赢平输的场数,输出一组即可,即x+y+z=n 且 xw+yd=p的一组解. 可以扩展公约数做,但由于注意到d和w<1 ...
- OWASP ModSecurity Core Rule Set (CRS)的基本使用
Preface 前述文章开源WAF工具ModSecurity,介绍了ModSecurity作为Nginx的动态加载模块的基本安装和使用. 本篇简单介绍ModSecurity CRS规则集的使用. # ...