SveletJs学习——事件
1. 事件on: [事件] = {事件名}
- 事件名称可选： click、mousemove、mouseover …
<script>let movePoint = { x: 0, y: 0}function handleMousemove(e) {movePoint.x = e.clientX;movePoint.y = e.clientY;}</script><main><div on:mousemove={handleMousemove} class="divSize">滑动位置的坐标为: {movePoint.x}, {movePoint.y}</div></main><style>.divSize {width: 100vw;height: 100vh;background-color: aqua;}
</style>
2. 内联事件
- 会正常执行函数，但是看起来不清晰，不建议这样使用
<main><div on:mousemove="{e => movePoint= {x: e.clientX, y: e.clientY}}" class="divSize">滑动位置的坐标为: {movePoint.x}, {movePoint.y}</div></main>
3. 事件修饰符 on:[事件]|[修饰符]={事件名}
DOM事件处理程序具有额外的修饰符。修饰符的使用格式
3.1 once: 运行一次事件处理程序后将其删除
<script>function handleClick() {console.log('点击')}
</script>
<main><button on:click|once={handleClick}>处理一次</button>
</main>
3.2 preventDefault: 阻止默认行为
a标签内输入内容，若不阻止事件的默认行为，那么会跳转到baidu.com上去，
若我们有其他用途则会收到影响。同样在处理表单时这个修饰符也可使用<script>function handleClick() {console.log('点击')}
</script><main><a href="www.baicu.com" on:click|preventDefault={handleClick}>不跳转的a标签</a>
</main>
3.2 stopPropagation：阻止事件冒泡
直接点击子元素，发现不仅执行了子元素的事件，还执行了父元素的事件。加上stopPropagation会发现，子元素对父元素的影响消除了。
<script>function parentClick() {console.log('你好，我是你的父元素')}function childClick() {console.log('你好，我是你的子元素')}
</script><main><div class="parent-el" on:click={parentClick}>父元素<div class="child-el" on:click|stopPropagation={childClick}>子元素</div></div>
</main><style>.parent-el {width: 200px;height: 200px;background-color: aqua;}.child-el {width: 100px;height: 100px;background-color: blueviolet;}</style>
3.3 passive: 优化了对touch/wheel事件的滚动表现(Svelte会在合适的地方自动添加滚动条)
- wheel: 表示用户滚动鼠标滚轮或类似输入设备时触发的事件
- touche: 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。
3.4 capture: 在capture阶段而不是bubbling阶段触发事件处理程序
- capture： 捕获，自上而下
- bubbling： 冒泡，自下而上
3.5 self: 仅当event.target是其本身时才执行
同样可以解决事件冒泡问题。因为子元素冒泡会执行父元素的事件。那么只要将父元素内容设置.self，这样只有点击父元素的target才会执行这个事件。
<script>function parentClick() {console.log('你好，我是你的父元素')}function childClick() {console.log('你好，我是你的子元素')}
</script><main><div class="parent-el" on:click|self={parentClick}>父元素<div class="child-el" on:click={childClick}>子元素</div></div>
</main><style>.parent-el {width: 200px;height: 200px;background-color: aqua;}.child-el {width: 100px;height: 100px;background-color: blueviolet;}</style>
4. 组件事件(组件传值)
组件也可以调度事件，为此，组件内必须创建一个相同的事件并在外部进行分配。
- 在子组件中引入createEventDispatcher
- 子组件中设定触发事件方法，并调用
dispatch(’父组件调用子组件方法名‘,{参数}) - 父组件中引入子组件
- 父组件中
on:子组件方法名={处理函数}
使用实例：
- Child.svelte
<script>import { createEventDispatcher } from 'svelte'const dispatch = createEventDispatcher()function sendMsgToParent() {dispatch('msg', {text: '给父亲的一首诗'})}
</script>
<main><button on:click={sendMsgToParent}>我是子组件，点击我给父组件传个值</button>
</main>
- Parent.svelte
<script>import Child from './components/Child.svelte'function handleMsg(event) {console.log(event.detail.text, '子组件传过来的值')}</script><main><Child on:msg={handleMsg} />
</main><style></style>
createEventDispatcher必须在首次实例化组件时调用它。组件本身不支持如setTimeout之类的事件回调。定义一个dispatch进行连接，进而把组件实例化。
5. 事件转发
与DOM事件不同，组件事件不会冒泡（bubble），如果你想要在某个深层嵌套的组件上监听事件，则中间组件必须转发该事件。
模块4中我们距离了Parent和Child组件通信，事件转发与其相似，只不过外面多了一层Outer组件包裹
简写后：
- Child.svelte 子组件
<script>import { createEventDispatcher } from 'svelte'const dispatch = createEventDispatcher()function sendMsgToParent() {dispatch('msg', {text: '给父亲的一首诗'})}
</script>
<main><button on:click={sendMsgToParent}>我是子组件，点击我给父组件传个值</button>
</main>
- Outer.svelte 中间件
<script>import Child from './Child.svelte'
</script>
<main><Child on:msg/>
</main>
- Parent.svelte 父组件
<script>import Outer from './components/Outer.svelte'function handleMsg(event) {console.log(event.detail.text, '子组件传过来的值')}</script><main><Outer on:msg={handleMsg}/>
</main>
6. DOM事件转发
事件转发也可以应用至DOM事件中。我们可以自主封装一个button按钮，有固定的样式，符合整个页面的风格。
- CustomButton.svelte 定义button的文件，包括样式，和抛出去的方法
<script>import { createEventDispatcher } from "svelte";const dispatch = createEventDispatcher()function HandleClickEvent() {dispatch('myClick')}
</script>
<main><button on:click={HandleClickEvent}>点击</button>
</main>
<style>button {border-radius: 4px;background-color: blue;color: white;width: 80px;height: 24px;font-size: 14px;line-height: 24px;margin: 0;padding: 0;}button:hover {background-color: aqua;}
</style>
- FancyButton.svelte 中间件转发
<script>import CustomButton from './CustomButton.svelte'
</script>
<main><CustomButton on:myClick/>
</main>
- App.svelte 其他页面中的应用
<script>import CustomButton from './components/CustomButton.svelte'function appClick() {console.log('app Click')}
</script><main><CustomButton on:myClick={appClick}/>
</main>
官方文档
如果有用，点个赞呗~
总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~
SveletJs学习——事件相关推荐
- React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件绑定 组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件 ...
- Winform3、事件触发机制学习:事件的注册和定义和参数含义
Winform3.事件触发机制学习:事件的注册和定义 在一个Form窗体中拖个按钮,双击后系统自动生成代码: // 定义事件,一般在Form.cs文件 // 默认事件是有命名规范的,控件命_事件名_个 ...
- 学习笔记 | TNNLS 2022 THPs：学习事件序列因果结构的拓扑霍克斯过程
文章目录 一.序言 二.Introduction 三.Related Work 四.拓扑霍克斯过程 五.总结 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一.序 ...
- Spark学习-事件日志EventLog
事件日志EventLog 背景 系统结构 Spark Event 介绍 事件类型 事件内容 事件日志 事件分析 背景 最近工作需要使用Flink对Spark的应用事件日志进行处理,帮助发现Spark应 ...
- JavaScript基础学习--事件代理
一.JavaScript原生事件代理 var item = document.getElementById('item'); item.onclick(function(ev) {var ev = e ...
- Nodejs学习事件模块
1.nodejs 版本为v6.2.0,events是node.js 最重要的模块,events模块只提供了一个对象EventEmitter,EventEmitter 的核心是事件发射与事件监听器.可以 ...
- SveletJs学习——运动动画
介绍 设置值并且查看DOM自动更新这个过程非常酷,渐变这些值,在svelte中有一些工具,可以帮助您构建使用动画来传达流畅的用户界面 svelte/motion模块导出两个函数: tweened 和 ...
- 直播 | ACL 2021论文解读：基于对抗学习的事件抽取预训练模型
「AI Drive」是由 PaperWeekly 和 biendata 共同发起的学术直播间,旨在帮助更多的青年学者宣传其最新科研成果.我们一直认为,单向地输出知识并不是一个最好的方式,而有效地反馈和 ...
- 【SCIR Lab】事件表示学习简述
作者:哈工大SCIR 廖阔 1. 简介 事件通常指包含参与者在内的某种动作或情况的发生,或世界状态的改变.在粒度上,事件介于词与句子之间:与词相比,事件通常包含多个词,用来描述事件的发生及事件的组成要 ...
最新文章
- docker 挂载主机目录访问报错Permission denied 解决办法
- Hadoop学习之MapReduce(一)
- html border阴影效果_【开发小技巧】—如何使用HTML和CSS创建浮动框效果？
- 坑爹的日志无法按天切割问题
- 探讨：ASP.NET技术的学习顺序问题
- TIA博途中如何将CPU导出为GSD文件与其他PLC进行PROFINET通信？
- 额。。万恶之源就是c
- 钉钉考勤报表--工时统计小程序
- Transform.setIdentity()invert()transpose()
- 修改mac终端的前缀
- 谷歌浏览器的用户安利一个非常好用的插件
- oracle复合数据类型
- RLC串并联谐振回路特性、如何判断容性感性
- 数字化转型中的大数据治理架构
- 数据结构与算法A实验六图论---7-1 列出连通集(BFS DFS)
- webgis开发参考资料
- 广西省北海市谷歌卫星地图下载
- mysql 数据库，表，字段的字符编码
- Linux系统下实现图片切换的方法
- Tinyumbrella无法运行的解决办法