首页 > 编程语言 >前端事件基础,一个简单的事件触发程序

前端事件基础,一个简单的事件触发程序

时间:2022-11-02 13:11:13浏览次数:44  
标签:触发 鼠标 前端 点击 事件 按钮 btn

事件组成,事件三要素

1.事件源:事件触发的按钮,比如鼠标点击某个图标跳转页面,那个图标就称为事件源。
比如,

<button>我是一个按钮,也是事件源</button>

2.事件类型:事件触发的方式,怎么触发一个事件,比如鼠标点击(oncilck),鼠标经过,还是按下松开触发。
3.事件处理程序:通过函数赋值的方式来完成

事件执行三步骤

1.获取事件源:

var btn=document.querySelector('button');

2.绑定事件:可以省略,下一步会重复这个操作

btn.onclick;

3.添加事件处理程序,也就是给绑定的事件赋值函数,点击按钮触发事件,控制台输出文字:

btn.onclick=fuction(){
    console.log('事件触发成功');
}```

标签:触发,鼠标,前端,点击,事件,按钮,btn
From: https://www.cnblogs.com/welcome995710523/p/16850672.html

相关文章

  • 前端js代码执行顺序
    个人理解,方便记忆js单线程,自上而下执行先走一遍主代码块,遇到谁调用先执行谁,特殊(遇到setInterval,setTimeout直接放最后执行),(遇到promise,async和await内部内容直接执行,但pro......
  • SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自
    1、大致思路以下是基于先处理图片、后端返回图片地址进行的==存数据==1、将图片信息提交到后端2、后端处理3、后端返回前端图片的访问地址4、前端将图片地址存入要提......
  • 拾色器,可以取出电脑屏幕的任何颜色,ui以及程序员前端等常用软件,文件很小,300K...
    作者:程序员小冰,今天给大家介绍一个小软件,挺实用的,叫做拾色器。用途:取出电脑屏幕的任意颜色,当你看到一个颜色很好看,而不知道它是什么RGB组成的,这个小软件就可以帮你忙了。适......
  • 畅捷通0day勒索攻击事件 几个IOC都只是漏洞的 勒索病毒本身没有看到ioc
    畅捷通0day勒索攻击事件关联归因及产品解决方案时间:  2022年08月30日  1.概述近期,畅捷通T+软件的0day漏洞,被“魔笛”黑客组织利用进行勒索攻击活动,引起较大社会......
  • WPF事件转命令
    <Windowx:Class="WpfAppDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.c......
  • 前端面试指南之React篇(二)
    react中这两个生命周期会触发死循环componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发,因此不能再这两个生命......
  • 前端面试指南之React篇(一)
    组件之间传值父组件给子组件传值在父组件中用标签属性的=形式传值在子组件中使用props来获取值子组件给父组件传值在组件中传递一个函数在子组件中用props来获取......
  • Javascript进阶笔记 - 事件
    事件目录事件1.事件相关概念2.文档的加载3.事件的冒泡4.事件的委派5.事件监听绑定1.事件相关概念事件是电脑输入设备与页面进行交互的响应。注册就是告诉游......
  • Javascript进阶笔记 - 常用事件
    常用事件目录常用事件1.onload事件2.onclick事件3.onblur事件4.onchange事件5.onsubmit事件6.onscroll事件7.onmousemove事件8.onmousedown&onmouseup事件9.on......
  • 【2022-11-01】前端Vue框架(六)
    一、Vuex的使用Vuex基本使用#在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意......