为元素绑定事件的方法

第一种:

对象.addEventListener("事件类型",事件处理函数,false) ---谷歌火狐支持,IE8不支持

第二种:

对象.attachEvent("有on的事件类型",事件处理函数) ---谷歌火狐不支持,IE8支持

相同点:都可以为元素绑定事件

不同点:1.方法名不一样

2.参数个数不一样,addEventListener三个参数,attachEvent两个参数

3.addEventListener谷歌、火狐、IE11支持,IE8不支持;attachEvent谷歌、火狐、IE11不支持,IE8支持

4.this不同,addEventListener中的this是当前绑定事件的对象;attachEvent中的this是window

5.addEventListener中的事件类型没有on;attachEvent中的事件类型有on

为元素解绑事件:

1.对象.on事件名字 = 事件处理函数  ---绑

对象.on事件名字 = null  --- 解

2.对象.addEventListener("没有on的事件类型",命名函数,false)  --- 绑

对象.removeEventListener("没有on的事件类型",命名函数,false)  --- 解

3.对象.attachEvent("on事件类型",命名函数)  --- 绑

对象.detachEvent("on事件类型",函数名字)  --- 解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Canvas中,单个元素绑定事件需要使用一些额外的技巧。因为在Canvas中,我们只能绑定整个Canvas的事件,而无法针对单个元素进行事件绑定。 以下是一种实现方式: ```html <canvas id="myCanvas" width="800" height="600"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制矩形 ctx.fillStyle = "#FFFFFF"; ctx.fillRect(100, 100, 200, 200); // 监听Canvas的点击事件 canvas.addEventListener("click", function(event){ var x = event.pageX - canvas.offsetLeft; var y = event.pageY - canvas.offsetTop; // 判断点击是否在矩形内部 if(x > 100 && x < 300 && y > 100 && y < 300){ // 触发矩形点击事件 alert("Rectangle clicked!"); } }); </script> ``` 在这个例子中,我们绘制了一个矩形,并在Canvas上绑定了一个点击事件。当用户点击矩形区域时,我们首先通过计算出鼠标相对于Canvas左上角的坐标,然后判断是否在矩形内部,如果是,则触发矩形的点击事件。 需要注意的是,我们在判断点击是否在矩形内部时,需要使用矩形在Canvas中的坐标和大小。因此,如果我们在绘制矩形时使用了Canvas的变换(如平移、旋转、缩放等),那么我们需要先将鼠标坐标进行相应的逆变换,才能得到矩形在Canvas中的坐标和大小。 在这个例子中,我们只绘制了一个矩形,因此可以直接将事件绑定在Canvas元素上。但是,如果我们需要在Canvas中绘制多个元素,并且希望能够针对每个元素单独绑定事件,那么就需要使用一些更高级的技巧,如利用Canvas的像素数据进行事件检测等,这些技巧比较复杂,需要根据实际情况来决定是否使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值