Event 事件 - 基础

事件驱动三要素

事件源:即触发事件的元素

事件:被JavaScript检测到的行为。例如:

   鼠标点击

   键盘按键

   选输入框

事件处理函数:事件发生时要进行的操作,又叫做“事件句柄”或“事件监听器”

 

事件分类

鼠标事件:    click     鼠标点击操作

       dblclick     鼠标双击操作

      mousedown    按下鼠标按键

      mousemove 鼠标指针在元素上方移动

      mouseover     鼠标指针进入元素

      mouseout·   鼠标指针移出元素

键盘事件: keydown    按下键盘按键

      keyup        抬起键盘按键

      keypress        按下或按住键盘按键

表单事件:   focus              input获得焦点

      blur      input失去焦点

      change     更改input元素的内容

页面事件:   load      页面加载完成

 

事件绑定

HTML标签的事件属性

1 <input type = "button" id = "btn" value = "点击" ouclick = "test()"/>

 1 function(){ 2 //.... 3 } 

DOM标准的事件

通过on加事件类型的方式去绑定事件,也属于DOM 0 级事件,例:

 1 <input type="button" id = "btn" value= "点击"/>
 2  
 3 //方式一:
 4 btn.onclick = function(){
 5        //...
 6 }
 7 
 8 
 9 //方式二:
10 function test(){
11       //...  
12 }
13 btn.onclick = test;

事件监听器

DOM提供了事件监听器,可以同时绑定或删除多个事件,并且具有多个事件处理函数。属于DOM 2级事件

绑定:

 1 事件源.addEventListener(eventName, functionName, boolean); 

删除:

 1 事件源.removeEventListener(eventName, functionName, boolean); 

参数说明:

eventName:为元素指定具体的事件名称(例如单击事件是click等);

functionName: 绑定事件的处理函数;

boolean:布尔值,默认为false。

绑定:

1 <input type ="button" id = "btn" value = "点击"/>
2 
3 btn.addEventListener('click'.function(){
4       console.log('xxxxx');
5 },false);

删除

1 function handle(){
2         console.log('xxx');
3 }
4 //绑定事件
5 btn.addEventListener("click",handle,false);
6 //删除事件
7 btn.removeEventListener("click",handle,false);    

addEventListener() 方法还可以为指定一个元素绑定一个事件同时具有多个处理函数。如下代码示例:

1 btn.addEventListener('click'.function(){
2       console.log('第一次执行');
3 },false);
4 btn.addEventListener('click'.function(){
5       console.log('第二次执行');
6 },false);

 

转载于:https://www.cnblogs.com/amag/p/7471139.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

String 与 StringBuilder 区别与用法

String用final修饰&#xff0c;实际上是不可更改的。我们平常用的“”来连接&#xff0c;实际执行过程中是将原字符串连接之后生成新的对象重新赋值给这个名字的字符串。Testpublic void myStrTest(){String s "str_s";System.out.println(s);String ss s.toUpperC…

防跳墙访问

出现场景: 1. 没有登录&#xff0c;也能访问网页 2. 没有相关权限&#xff0c;也能访问对应的控制器和方法 解决方案: 定义一个CommonController,其他控制器继承CommonController,在CommonController中定义初始化方法_initialize 注:这里用的是tp3.2框架,如果我们直接在Commo…

windows编译libevent时报告“缺少print_winsock_errors.obj”的解决

一、综述 Libevent 是一个用C语言编写的、轻量级的开源高性能事件通知库。 在libevent官网(http://libevent.org)下载源码包&#xff0c;在Windows平台编译时&#xff0c;会报缺少“print_winsock_errors.obj”的错误。 二、原因及解决 经检查&#xff0c;这是因为源码包中缺少…

7.python之正则表达式re模块

一.正则表达式中常用元字符的复习。通配符系列.(点)匹配任意一个除换行符以外的字符。*(星号)用来匹配*星号前面的字符或者一组字符0到无穷次。可以写为0(加号)匹配加号前面的一个字符或者一组字符1到无穷次。可以写为1?(问号)匹配问号前面的一个字符或者一组字符0到1次。可以…

C# WPF开源控件库HandyControl用法举例

概述HandyControl是一款免费开源的WPF控件库&#xff0c;Github可以获取到源代码&#xff0c;相关的示例代码也在github上能获取到&#xff0c;但是没有详细的中文说明文档&#xff0c;对于新手而言使用起来还是会有一些困扰&#xff0c;网上也很难搜到相关的用法示例&#xff…

nginx服务器,访问时显示目录,不直接显示index.php

一、效果 二、解决方案 修改网站配置文件&#xff0c;添加如下代码&#xff1a; autoindex on; autoindex_exact_size off; autoindex_localtime on; 修改后的网站配置文件如下&#xff1a; server {listen 80;server_name test.haveyb.com;charset utf-8;error_log …

复选框checked 选中后不显示打钩

复选框checked 选中后不显示打钩 checkbox属性checked"checked"已有&#xff0c;但复选框却不显示打钩的原因 复选框绑定了click事件&#xff0c;点一次选中&#xff0c;再点击取消选中&#xff0c; 第一次&#xff0c;可以正常显示选中和取消&#xff0c;但当再去选…

dotnet7 aot编译实战

原文地址&#xff1a;https://www.cnblogs.com/kewei/p/16722674.html0 起因这段日子看到dotnet7-rc1发布&#xff0c;我对NativeAot功能比较感兴趣&#xff0c;如果aot成功&#xff0c;这意味了我们的dotnet程序在防破解的上直接指数级提高。我随手使用asp.netcore-7.0模板创建…

实现ModelDriver接口的功能(转)

ModelDriver接口 来自com.opensymphony.xwork2.ModelDriven。是xwork-2.1.2-750.jar包的东西。 下面是源码&#xff1a; package com.opensymphony.xwork2; public abstract interface ModelDriven<T> { public abstract T getModel(); } 该接口只有一个getModel()方法…

Git的使用(推荐命令行模式)

一 使用 git版本控制已经逐渐取代cvs,svn等版本控制,对于一名程序员来说,使用git同样是一门必备的功课.1. 仓库初始化查看文件.如果有.git文件夹,说明创建本地仓库成功(.git是隐藏文件夹)2. 修改用户名和邮箱本地配置:注: 在全局配置与本地配置都存在用户名时,本地配置优先级更…

.NET MAUI 环境配置技巧

关于 .NET MAUI 国内⼩伙伴在配置 .NET MAUI 的时候&#xff0c;遇到不少问题。希望通过本教程&#xff0c;给到大家⼀些指引。01基础组件部分.NET SDK 安装建议安装最新的 .NET SDK下载地址 https://dotnet.microsoft.com/download/dotnet/6.0安装 .NET MAUI安装 .NET MAUI 成…

Linux中一些常用的很巧妙的命令

当你想要使用上一个命令的最后一个参数&#xff0c;&#xff08;上一个命令的最后一个参数很长&#xff09;&#xff0c;可以使用 esc .      (是esc 点&#xff09; !$ 引用上一个命令的最后一个参数 对命令行的编辑快捷方式&#xff1a; Ctr…

android 8种对话框(Dialog)使用方法汇总

本文为作者原创&#xff0c;转载请注明出处&#xff1a;http://www.cnblogs.com/gzdaijie/p/5222191.html 目录 1.写在前面2.代码示例2.1 普通Dialog&#xff08;图1与图2&#xff09;2.2 列表Dialog&#xff08;图3&#xff09;2.3 单选Dialog&#xff08;图4&#xff09;2.4 …

使用layui的layer组件做弹出层

官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&q…

C#之表达式树使用

目的遇到一个场景需要接收一个表的列来进行动态排序&#xff0c;比如我想根据CreateTime进行正序排序&#xff0c;加上我使用的ORM框架是EFCore&#xff0c;那么我一下子就想到应该使用OrderBy&#xff0c;然后接收一个要排序的列query.OrderBy("CreateTime")但是这样…

实现一个基于相等性比较的 GroupBy

实现一个基于相等性比较的 GroupByIntro在我们的系统里有些数据可能会有问题&#xff0c;数据源头不在我们这里&#xff0c;数据不好修复&#xff0c;在做 GroupBy 的时候就会很痛苦&#xff0c;默认的 group by 会依赖于 HashCode &#xff0c;而某些场景下 HashCode 可能并不…

win7系统下载 ghost win7 Sp1 64位纯净3月版

win7系统下载 ghost win7 Sp1 64位纯净3月版 软件名称: Ghost Win7 Sp1 64位纯净3月版软件语言: 简体中文软件大小: 5.25大小: GB发布日期: 2017-03-21文件名称: ZJY_Ghost_win 7_X64_CJ201703.GHOM D 5: EB16DCD608A5CCFE34B58…

CrossPHP框架的常用操作

1. 在视图控制器中使用$this->res()方法来生成资源文件的绝对路径$this->res(css/style.css);生成的连接为http://youdomain.com/static/css/style.css2. 生成指定app名称的连接$this->appUrl()第一个参数为基础url, 第二个参数为app名称, 第三个参数为 控制器:方法 第…

WPF-07 Style之触发器

触发器能够在改变属性值的时候&#xff0c;根据值变化执行操作&#xff0c;在不需要创建一个新的控件的情况下&#xff0c;可以动态的改变控件的外观&#xff0c;当条件满足时&#xff0c;触发器可以改变任何属性的值&#xff0c;触发器通常定义在Style中&#xff0c;在窗体的根…

jdk自带常用命令行工具使用

转自&#xff1a;http://blog.csdn.net/winwill2012/article/details/46364923jps命令使用jps命令类似于Linux下的ps命令&#xff0c;用于列出当前正在运行的所有Java进程。基本用法直接运行不加任何参数就能列出所有java进程的pid和类的短名称。例如&#xff1a;常用参数-q参数…