事件的绑定（一）

最新推荐文章于 2021-08-22 10:09:27 发布
最新推荐文章于 2021-08-22 10:09:27 发布
阅读量5.9k 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript js css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43133192/article/details/105042723
版权

HTML事件

HTML事件

直接在HTML元素标签内添加事件，执行脚本

  • 语法：
    <tag 事件="执行脚本"></tag>
    功能：
    在HTML元素上绑定事件
    说明：
    执行脚本可以是一个函数的调用

鼠标事件

  • onload：页面加载时触发
  • onclick：鼠标点击时触发
  • onmouseover：鼠标滑过时触发
  • onmouseout：鼠标离开时触发
  • onfocus：获取焦点时触发
  • onblur：失去焦点时触发
  • onchange：域的内容改变时发生

关于this指向

在事件触发的函数中，this是对该DOM对象的引用

编程练习 1

小伙伴们，我们学习了HTML事件，那么根据效果图，实现以下功能：当点击按钮时，按钮本身的背景颜色发生变化，一起来试一下吧！

Tips：直接在事件中写执行语句

在这里插入图片描述

任务

第一步：先写出按钮的html结构代码，注意给value的值设置为“点击我试试”，value的值是按钮上的文字。

第二步：给按钮添加鼠标点击事件，并通过backgroundColor属性设置当鼠标点击时要呈现的颜色。

参考代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="
最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绑定事件的三种方法
weixin_43750162的博客
07-28 568
绑定事件的三种方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div_01{ width:200px; height: 200px; ...
绑定事件
weixin_50726569的博客
11-27 92
绑定事件 使用 对象.事件 = 函数 的形式绑定响应函数,只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定多个,后边会覆盖掉前边的 btn.onclick = function(){ console.log(this) } btn.onmouseover = function(){ console.log("123") } addEventListener() 通过这个方法也可以为元素绑定响应函数 参数： 1.事件的字符串，不要on 2.回调函数，当事件触发时该函数会被调用
事件的绑定（单个、多个）
weixin_30315435的博客
12-19 188
--------------------------------------------------------------------------- 绑定单个事件 <script type="text/javascript"> $(function(){ $("input[name=event_1]").bind("click",function(){ ...
JS 绑定事件(一个事件源有不同事件处理方法)
weixin_44021199的博客
07-24 550
方法：addEventListener(“事件操作”，“事件处理函数”，false) //最后一个参数一般默认值为false 测试代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
JS一个元素怎么绑定多个事件
BarryLee的博客
02-09 6036
有时候一个一个元素要绑定多个事件，其实是分开写 先看这个例子，我们预期它先执行alert1，然后是alert2，但事实上是没有alert1，因为覆盖了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绑定多个事件&lt
JS 事件绑定函数代码
10-29
JavaScript 事件绑定是Web开发中的一个关键概念，用于在用户与网页交互时执行特定的函数。在不同的浏览器中，事件绑定的实现方式有所不同，导致了跨浏览器兼容性问题。本篇将详细介绍如何编写一个兼容IE6、7、8以及...
详解Canvas事件绑定
09-28
以上就是一个基础的Canvas事件绑定实现，通过这种方式，我们可以为Canvas上的每一个图形或图片添加独立的事件处理，实现了类似DOM元素的事件委托。值得注意的是，如果图形数量庞大，可能需要考虑性能优化，避免每次...
C#移除所有事件绑定的方法
09-03
然而，在某些情况下，我们可能需要一次性移除所有事件绑定，例如在对象销毁或重置状态时。本文将深入探讨如何在C#中实现这一功能。 首先，我们需要理解C#中的事件机制。事件是基于委托的，而委托本质上是一种多播...
layui动态绑定事件的方法
10-16
今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
c调用按钮点击事件_事件的绑定（一）
weixin_39778218的博客
11-29 857
HTML事件HTML事件直接在HTML元素标签内添加事件，执行脚本语法：功能：在HTML元素上绑定事件说明：执行脚本可以是一个函数的调用鼠标事件onload：页面加载时触发onclick：鼠标点击时触发onmouseover：鼠标滑过时触发onmouseout：鼠标离开时触发onfocus：获取焦点时触发onblur：失去焦点时触发onchange：域的内容改变时发生关于this指向在事...
如何给页面上的按钮绑定一个事件？
weixin_34292959的博客
06-03 3860
计划写一个例子系列来帮助前端新童鞋入坑，同时也梳理一下自己的知识体系。预计有30篇左右，本文是第一篇：如何给页面上的按钮绑定一个事件？ 文中的代码复制粘贴保存为html文件即可在Chrome里预览~ 这个例子实现的是在页面里有一个按钮，点击后弹出一个 Hello 弹窗。 1、原生实现 <html> <head> <title></title&g...
JS事件详解(二) —— 事件处理程序（事件的绑定）
bingo_wangbingxin的博客
01-22 3694
事件绑定方法 方法一：直接在HTML标签中绑定 在html标签中添加“on”+事件名称的属性来绑定事件 事件处理程序可直接写在属性值当中 div class="demo" onclick="console.log(this)">div> // this指向的是当前DOM对象 这种事件处理程序的作用域很特别，可以像局部变量一样直接访问document及元素本身的成员，示例：
关于点击click事件以及事件绑定的方式
Hello World
04-26 3万+
Javascript简单地为一个标签绑定事件写法（不单针对button标签）：<button onclick="click_fn()">click</button> <script> function click_fn(){ console.log(this); } </script>另一种是用DOM Document对象来绑定事件： （注：这
js多个对象绑定一个事件的方法
不断出发，永无抵达！
08-26 1万+
js多个对象绑定一个事件的方法 2011-07-18 15:48 关于一个对象绑定多个事件的方法之前转载过一篇文章，讲这方面的文章也比较多，但是在多个对象上绑定同一事件的问题困扰了我许久，今天终于找到了解决方案，两中方法都是基于JQuery实现的： 方法
js中事件绑定3种方法以及事件委托
热门推荐
程序员秋风的博客
04-23 4万+
事件绑定首先，我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom<button onclick="open()">按钮</button><script> function open(){ alert(1) } </script>2.直接绑定<button id="btn">按钮</button> <script> document.getElementById('btn'
js事件on动态绑定数据，绑定多个事件
lml_little的博客
11-29 1万+
一.on('clcik')与$('').clcik()方法的区别： on('clcik')： 1.绑定多个事件，用空格隔开事件和命名空间如：“click”或“keydown.myPlugin”。或者格式为 on({ "clcik": function(){}, mouseover: function(){} }) 命名空间: namespace 名字{ 定义的数据； 定义的函数；
vue——事件绑定
weixin_54362381的博客
08-22 1万+
Vue中的事件处理方法： 一、事件绑定基础语法有两种写法： 1、直接写函数名,@click="handleClick"; 2、加$event,@click="handleClicks($event,参数)"参数可选, $event是内置事件对象 ; 好处:不但可以传事件对象,还可以传其他的参数 <div id="app"> <!-- 第一种写法 --> <button @click="handleClick">Button</button> &lt
DOM基础2-16 编程练习
请叫我二狗哥
05-12 416
2-16 编程练习 小伙伴们，今天我们学习了怎样给DOM对象绑定事件，那么根据gif图，实现以下功能： （1）如果按钮的值是“全选”， 当点击按钮时，按钮的值变为“反选” （2）如果按钮的值是“反选”， 当点击按钮时，按钮的值变为“全选” 注意： 使用通过DOM获取HTML元素的方式绑定事件 gif图如下： 任务 根据gif效果图实现下面的任务步骤： 第一步：先写出按钮的ht...
uniapp事件绑定
最新发布
04-13
在UniApp中，事件绑定是一种常见的操作，用于响应用户的交互行为。以下是关于UniApp事件绑定的介绍： 1. 事件绑定方式：UniApp支持多种方式进行事件绑定，包括在标签上直接使用@符号绑定事件、使用v-on指令绑定事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值