brython | 初探鼠标事件-1:点击事件

各位前端大佬勿笑话,运维小弟献丑了。

前段时间在【码上掘金】看见大佬使用【文言文】写了一个连连看,于是我也想用【brython】也实现一个连连看。

于是乎,你们就看到这篇文章和这个项目了。

https://code.juejin.cn/pen/7159814244257497096

如果大佬们对brython不是特别了解的话,建议先查看之前写的文章:

【brython | 初始化项目】: https://juejin.cn/post/7153640242145296421

完成一个简单的点击事件

鼠标事件,也称之为Mouse Event,是指捕获鼠标操作所触发的事件,当然现在智能手机、平板等,在滑动屏幕的时候,也可以一并称之为鼠标事件。

仅需如下数行代码即可完成一个最简单的点击事件注册

from browser import document
from browser import html

btn = html.BUTTON("点击我触发事件")
btn.id = "btn"

document <= btn

def sayHello(ev):
    print("hello juejin pdudo" , ev)
    
document["btn"].bind("click",sayHello)

如上代码,先申请一个按钮,其id属性赋值为btn, 接着为该按钮注册一个鼠标点击事件,触发的函数为sayHello,鼠标事件为click即为: 在btn上单击左键松开后会触发事件。

如上案例中,我们将bind称之为绑定方法,

接着我们运行代码,我们会得到这样的一种效果

代码也已经放到【码上掘金】下面了

https://code.juejin.cn/pen/7167010617667092488

鼠标监听事件有哪些

brython给提供的鼠标事件有哪些呢?我整理为了一个表格,如下:

鼠标事件 类型 解释
click 点击事件 在监听的元素上单击左键松开后会触发事件
dblclick 点击事件 在监听的元素上双击左键松开后会触发事件
mouseup 点击事件 在监听的元素上按下鼠标松开后,会触发事件(左键、右键、滚轮都会触发)
mousedown 点击事件 在监听的元素上按下鼠标会触发事件(左键、右键、滚轮都会触发)

如果学过javascript的话,会觉得上述点击事件非常熟悉,当然了,brython的工作原理是将python代码,通过某种方式,解析为javascript从而在浏览器中运行。所以说,有些写法和javascript差别不大。

如果要区分一下的话,可以将其区分为点击事件和移动事件。

点击事件Demo

在上述提供的鼠标事件中,其中clickdblclickmouseupmousedown 都是鼠标点击事件。

按照监听键值来区分的话,可以归纳为2类

  • clickdbclick只能监听鼠标左键
  • mouseupmousedown 则可以监听到左键、右键以及滚轮

如果按照触发事件来区分的话,也可以归纳为2类

  • clickdbclick以及 mouseup会在鼠标释放后触发事件
  • mousedown 在点击后就触发事件

上述案例中,使用了click来监听,可以做个实验;证明是松开后触发, 点击后拖到其他区松开再来看反馈。

可以发现,在点击后,拖着鼠标在别的地方松开,是不会触发事件的。

其他3种监听事件,也写成了案例,放到【码上掘金】下面了

https://code.juejin.cn/pen/7167010868784267272

总结

鼠标监听事件就介绍完咯,总体而言,在一般项目中,我们使用最多的就是click事件了,之前实现的连连看也是使用click事件哦,好了,快动动你的小手指来试试吧。

本文正在参加「金石计划 . 瓜分6万现金大奖」

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容