brython | 笨办法写个连连看-2. 监听鼠标事件

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

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

完成一个简单的点击事件

鼠标事件，也称之为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称之为绑定方法，

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

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

code.juejin.cn/pen/7167010…

鼠标监听事件有哪些

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

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

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

点击事件

在上述提供的鼠标事件中，其中click、dblclick、mouseup、mousedown 都是鼠标点击事件。

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

• click和dbclick只能监听鼠标左键
• mouseup和mousedown 则可以监听到左键、右键以及滚轮

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

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

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

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

如前面介绍，mouseup和mousedown可以监听所有的鼠标按键，那么怎么分辨 左键、右键、以及滚轮呢？

在brython已经为我们定义好了，在点击事件中，有一个参数是button，该参数值的意义如下:

• 0: 左键
• 1: 轮滚
• 2: 右键

其他3种监听事件，也写成了案例，放到【码上掘金】上了，可以尝试下

code.juejin.cn/pen/7167010…

移动事件

点击事件较为简单，而移动事件就较为复杂一点了。

from browser import document
from browser import html
document <= html.DIV(id="div1")
div1 = document["div1"]
div1.style.width = "300px"
div1.style.height = "300px"
div1.style.background = "green"
document <= html.DIV(id="div2")
div2 = document["div2"]
def showInfos(ev):
    div2.clear()
    div2 <= html.P("x:"+str(ev.x)+" y"+str(ev.y))
document["div1"].bind("mousemove",showInfos)

如上代码监听的是div1，监听的事件是mousemove，触发的函数为showInfos，在其中，我们向div2输出距离窗口的像素，执行后，可以看到如下效果。

上述案例，也放到了码上掘金上：

code.juejin.cn/pen/7167011…

在鼠标移动事件中，除了mousemove在监听的元素上移动就会触发事件，而其他移动事件，也可以分为2个部分，即：

• mouseenter和mouseover: 只要挪到监听事件上就会触发事件
• mouseleave和mouseout： 挪到监听事件上后在挪出来才会产生事件，即焦点在监听的元素上时不会触发事件，只有挪出来后才会触发事件

哎，可能有小伙伴要问了，挪到监听事件上就会触发事件，那么mouseenter和mouseover都能实现，有什么区别呢？ 区别是挪到其子元素是否会触发事件，其分为2个部分，如下：

• mouseenter和mouseleave 在挪到其子元素上时，不会触发事件
• mouseover和mouseout 在挪到其子元素上时，也会触发事件

为此，写了一个简单的demo，运行后效果如下：

代码将其放到了【码上掘金】中

code.juejin.cn/pen/7167012…

鼠标事件属性

除此之外，brython在点击的时候，提提供了点位（不管是点击事件还是移动事件），具体汇总为表格如下:

这个就不写代码演示了，有兴趣的可以运行下这个demo即可：

from browser import document
from browser import html
from browser import console
document <= html.DIV(id="div1")
div1 = document["div1"]
div1.style.width = "300px"
div1.style.height = "300px"
div1.style.backgroundColor = "red"
def showinfos(ev):
    console.log("x:",ev.x," y:",ev.y," clientX:",ev.clientX," clientY:",ev.clientY," screenX:",ev.screenX," screenY:",ev.screenY)
document["div1"].bind("mousemove",showinfos)

连连中如何抓出table中对应的值

在连连看中，有个前提是地图的制作，因为还没有详细的介绍连连看地图制作，所以这里就初略的介绍一下，来作为继续讲解鼠标事件的铺垫。

在我们brython实现的连连看中，我们使用的是table作为各种图案的标配

使用6*6个格子来做一个地图，图示如下

其中 1-6 的数字 假如都是连连看的图案，要如何抓出其中的数值呢？ 我们将整个table都定义为监听属性，在鼠标点击后，我们拿到其中的td的值即可。

为此，我们可以模拟出一个

代码我放到【码上掘金】了：

code.juejin.cn/pen/7167334…

现在我们可以取值了，那还有一个问题： 我们如何判断2点到底在哪儿？对于整个table而言，下标应该是什么呢？ 这个就留着下次介绍练练看地图的时候再讲解了。

总结

鼠标监听事件就介绍完咯，总体而言，在一般项目中，我们使用最多的就是click事件了，之前实现的连连看也是使用click事件哦。

好了，快动动你的小手指来试试吧。