热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

二十、事件入门

二十、事件入门JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。1.事件介绍事件一般是用于浏览器和用户
二十、事件入门

 

Javascript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。

 

1.事件介绍

  事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现,作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。

 

Javascript有三种事件模型:内联模型、脚本模型和DOM2模型。

 

2.内联模型

  这种模型是最传统接单的一种处理事件的方法。在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件。虽然内联在早期使用较多,但它是和HTML混写的,并没有与HTML分离。

 

  //在HTML中把事件处理函数作为属性执行JS代码

            //注意单双引号

 

  //在HTML中把事件处理函数作为属性执行JS函数

                   //执行JS的函数

PS:函数不得放到window.onload里面,这样就看不见了。

 

3.脚本模型

由于内联模型违反了HTML与Javascript代码层次分离的原则。为了解决这个问题,我们可以在Javascript中处理事件。这种处理方式就是脚本模型。

       var input = document.getElementsByTagName(‘input‘)[0];         //得到input对象

       input.Onclick= function () {                                                    //匿名函数执行

              alert(‘Lee‘);

       };

 

PS:通过匿名函数,可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟着括号)。

  input.Onclick= box;                                          //把函数名赋值给事件处理函数

 

4.事件处理函数

1.Javascript可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。

 

Javascript事件处理函数及其使用列表

事件处理函数

影响的元素

何时发生

onabort

图像

当图像加载被中断时

onblur

窗口、框架、所有表单对象

当焦点从对象上移开时

onchange

输入框,选择框和文本区域

当改变一个元素的值且失去焦点时

onclick

链接、按钮、表单对象、图像映射区域

当用户单击对象时

ondblclick

链接、按钮、表单对象

当用户双击对象时

ondragdrop

窗口

当用户将一个对象拖放到浏览器窗口时

onError

脚本

当脚本中发生语法错误时

onfocus

窗口、框架、所有表单对象

当单击鼠标或者将鼠标移动聚焦到窗口或框架时

onkeydown

文档、图像、链接、表单

当按键被按下时

onkeypress

文档、图像、链接、表单

当按键被按下然后松开时

onkeyup

文档、图像、链接、表单

当按键被松开时

onload

主题、框架集、图像

文档或图像加载后

onunload

主体、框架集

文档或框架集卸载后

onmouseout

链接

当图标移除链接时

onmouseover

链接

当鼠标移到链接时

onmove

窗口

当浏览器窗口移动时

onreset

表单复位按钮

单击表单的reset按钮

onresize

窗口

当选择一个表单对象时

onselect

表单元素

当选择一个表单对象时

onsubmit

表单

当发送表格到服务器时

 

PS:所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如click事件的事件处理函数就是:onclick。在这里,我们主要谈论脚本模型的方式来构建事件,违反分离原则的内联模式,我们忽略掉。

 

对于每一个事件,它都有自己的触发范围和方式,如果超出了触发范围和方式,事件处理将失效。

 

2.鼠标事件,页面所有元素都可触发

click:当用户单击鼠标按钮或按下回车键时触发。

       input.Onclick= function () {

              alert(‘Lee‘);

       };

 

dblclick:当用户双击主鼠标按钮时触发。

       input.Ondblclick= function () {

              alert(‘Lee‘);

       };

 

mousedown:当用户按下了鼠标还未弹起时触发。

       input.Onmousedown= function () {

              alert(‘Lee‘);

       };

 

mouseup:当用户释放鼠标按钮时触发。

       input.Onmouseup= function () {

              alert(‘Lee‘);

       };

 

mouseover:当鼠标移到某个元素上方时触发。

       input.Onmouseover= function () {

              alert(‘Lee‘);

       };

 

mouseout:当鼠标移出某个元素上方时触发。

       input.Onmouseout= function () {

              alert(‘Lee‘);

       };

 

mousemove:当鼠标指针在元素上移动时触发。

       input.Onmousemove= function () {

              alert(‘Lee‘);

       };

 

3.键盘事件

keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。

       Onkeydown= function () {

              alert(‘Lee‘);

       };

 

keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

       Onkeypress= function () {

              alert(‘Lee‘);

       };

 

keyup:当用户释放键盘上的键触发。

       Onkeyup= function () {

              alert(‘Lee‘);

       };

 

4.HTML事件

load:当页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。

window.Onload= function () {

       alert(‘Lee‘);

};

 

unload:当页面完全卸载后在window上面触发,或当框架集卸载后在框架集上触发。

window.Onunload= function () {

       alert(‘Lee‘);

};

 

select:当用户选择文本框(input或textarea)中的一个或多个字符触发。

       input.Onselect= function () {

              alert(‘Lee‘);

       };

 

change:当文本框(input或textarea)内容改变且失去焦点后触发。

       input.Onchange= function () {

              alert(‘Lee‘);

       };

 

focus:当页面或者元素获得焦点时在window及相关元素上面触发。

       input.Onfocus= function () {

              alert(‘Lee‘);

       };

 

blur:当页面或元素失去焦点时在window及相关元素上触发。

       input.Onblur= function () {

              alert(‘Lee‘);

       };

submit:当用户点击提交按钮在元素上触发。

       form.Onsubmit= function () {

              alert(‘Lee‘);

       };

 

reset:当用户点击重置按钮在元素上触发。

form.Onreset= function () {

              alert(‘Lee‘);

       };

 

resize:当窗口或框架的大小变化时在window或框架上触发。

       window.Onresize= function () {

              alert(‘Lee‘);

       };

 

scroll:当用户滚动带滚动条的元素时触发。

       window.Onscroll= function () {

              alert(‘Lee‘);

       };

 

二十、事件入门


推荐阅读
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 通过 NuGet 获取最新版本的 Rafy 框架及其详细文档
    为了帮助开发者更便捷地使用Rafy领域实体框架,我们已将最新版的Rafy框架程序集上传至nuget.org,并同步发布了最新版本的Rafy SDK至Visual Studio。此外,我们还提供了详尽的文档和示例,以确保开发者能够快速上手并充分利用该框架的强大功能。 ... [详细]
  • 1. 设置用户密码:使用 `slappasswd` 工具生成加密密码,确保账户安全。具体步骤如下:输入命令 `slappasswd -s NewPassword`,系统将提示重新输入新密码,并生成加密后的哈希值 {SSHA}xxxxxxxxxxxxxxxxx。2. 编写配置文件:编辑 `vildapus` 配置文件,添加必要的用户账户信息,以确保新用户能够顺利登录系统。 ... [详细]
  • 该问题可能由守护进程配置不当引起,例如未识别的JVM选项或内存分配不足。建议检查并调整JVM参数,确保为对象堆预留足够的内存空间(至少1572864KB)。此外,还可以优化应用程序的内存使用,减少不必要的内存消耗。 ... [详细]
  • 在数字图像处理中,Photoshop 的直方图是一个重要的工具,它能够精确地反映图像中不同亮度级别的分布情况。通过分析直方图,用户可以深入了解图像的曝光、对比度和色调范围,从而进行更精细的调整。直方图不仅模拟了物体表面反射光线的原理,还能帮助摄影师和设计师更好地掌握图像的明暗细节,优化视觉效果。 ... [详细]
  • 本文深入探讨了Java多线程环境下的同步机制及其应用,重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例,如在一个类中使用`synchronized`修饰方法,展示了如何实现线程安全的代码块。此外,文章还讨论了`ReentrantLock`等其他同步工具的优缺点,并提供了实际应用场景中的最佳实践。 ... [详细]
  • 每日前端实战:148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果
    通过点击页面右侧的“预览”按钮,您可以直接在当前页面查看效果,或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性,观众可以实时调整代码并观察变化。访问以下链接体验完整效果:https://codepen.io/comehope/pen/yRyOZr。 ... [详细]
  • C# .NET 4.1 版本大型信息化系统集成平台中的主从表事务处理标准示例
    在C# .NET 4.1版本的大型信息化系统集成平台中,本文详细介绍了主从表事务处理的标准示例。通过确保所有操作要么全部成功,要么全部失败,实现主表和关联子表的同步插入。主表插入时会返回当前生成的主键,该主键随后用于子表插入时的关联。以下是一个示例代码片段,展示了如何在一个数据库事务中同时添加角色和相关用户。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
author-avatar
阳光下的我们卍
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有