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

事件入门

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

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

  事件介绍

       事件一般是用于浏览器和用户操作进行交互。最早是IENetscape Navigator中出现, 作为分担服务器端运算负载的一种手段。直到几乎所以的浏览器都支持事件处理。

DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件。IE9FirefoxOperaSafari Chrome全部已经实现了“DOM2级事件”模块的核心部分。IE8以前浏览器依然使用其专有事件模型。

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

 一、内联模型    

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

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

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

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

window.Onload=function(){
      function box(){
   alert(‘hello world‘);
}
}
  
function box(){
   alert(‘hello world‘);
}

二、脚步模型

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

 var input=document,getElementsByTagName(‘input‘)[0];  //得到input对象
       //对象.事件处理函数=函数名或者匿名函数
      input.Onlick=function(){   //匿名函数执行
      alert(‘hello wrold‘);
};

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

事件入门


推荐阅读
  • python+selenium十:基于原生selenium的二次封装fromseleniumimportwebdriverfromselenium.webdriv ... [详细]
  • this prototype 闭包 总结
    this对象整理下思路:一般用到this中的情景:1.构造方法中functionA(){this.nameyinshen;}varanewA() ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • JavaScript简介及语言特点
    本文介绍了JavaScript的起源和发展历程,以及其在前端验证和服务器端开发中的应用。同时,还介绍了ECMAScript标准、DOM对象和BOM对象的作用及特点。最后,对JavaScript作为解释型语言和编译型语言的区别进行了说明。 ... [详细]
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 如何优化Webpack打包后的代码分割
    本文介绍了如何通过优化Webpack的代码分割来减小打包后的文件大小。主要包括拆分业务逻辑代码和引入第三方包的代码、配置Webpack插件、异步代码的处理、代码分割重命名、配置vendors和cacheGroups等方面的内容。通过合理配置和优化,可以有效减小打包后的文件大小,提高应用的加载速度。 ... [详细]
  • {moduleinfo:{card_count:[{count_phone:1,count:1}],search_count:[{count_phone:4 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
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社区 版权所有