JavaScript事件详解A(兼容性) 2024-06-18 07:37:12 课程大纲1.事件基础2.事件处理函数( console.log );3.事件对象4.事件默认行为及阻止方式5.DOM2级时间处理6.事件委托机制我们依次来学习事件基础JavaScript事件是由访问Web页面的用户引起的一系列操作。当用户执行某些操作的时候,再去执行一系列代码。或者用来获取事件的详细信息,如鼠标位置、键盘按键等。事件处理函数javaScript可以处理的事件类型为︰鼠标事件、键盘事件、HTML事件所有的事件处理函数都会都有两个部分组成,on+事件名称console.log这里补充一个小知识点:console.log( ); 控制台输出信息我们可以用它在写代码的时候测试使用,非常方便格式:和alert( ); 的格式差不多,在括号直接写因为使用方法简单,具体的使用通过下面的例子来看鼠标常见的事件1.onclick; //鼠标单击事件2.ondbclick; //鼠标双击事件3.onmouseover; //鼠标移入事件4.onmouseup; //鼠标按下之后,松开时5.onmousedown; //鼠标被按下后6.onmousemove; //鼠标移动时触发我们先来看一下这几个常用的鼠标事件,有三个事件是差不多的,这里我们先来看一下这三个的执行顺序:查看运行结果,打开浏览器后按F12查看源码,选择console选项:当我们点击按住不放时,最先显示的是mousedown当我们松开时先显示的是mouseup最后才显示的是click这个顺序大家要记住,以免以后混淆我们再用alert来看一下其他几个事件:这里由于鼠标移动时会一直显示,影响其他效果的使用,先注释掉,大家自己试一下这三个里面鼠标移动的优先级最高,最先显示运行结果:具体的效果大家自己试一下即可,这里也可以看出我们做练习的时候用alert或者console.log都有可以,只不过console.log是显示在控制台,其他的鼠标事件大家自己搜索学习一下即可HTML事件1.window.onload; 这个不再多说,网页全部执行完再执行2.onsubmit; //在表单提交时触发3.onfocus; //点击文本框获取焦点时触发4.onblur; //在失去焦点时触发5.onchange; //内容发生改变时触发6.oninput; //输入内容时触发举个小例子:这里的return false; 先不用管它,以后还会讲到运行结果如下,点击提交按钮后控制台会显示submit:我们先看来看这两个事件,有个了解,键盘事件我们随后再讲事件对象在我们通常写的时候function();这个括号里面一般不写东西,如果我们想要获取事件对象,查看具体的事件信息,我们可以写一个参数e,即function(e);举个小例子:运行结果如下:当我们点击div时,可以弹出一些事件信息,供我们查看现在我用的是IE11支持显示,但是低版本的IE就需要用console.log(window.event); 才可查看如果我们用谷歌Chrome,显示的效果不太一样,不过表达的意思都是相同的:如果不放心可以设置一下兼容性,使所有的浏览器都可以通用并且准确无误:var evt = e|| event; //window可以省略这个我们之前说过运行结果就和上面一样:- 写作不易,大家多多关注,谢谢啦----web分享,分享的不只是web 赞 (0) 相关推荐 15个你应该掌握的JavaScript数组方法 点击链接 15个你应该掌握的JavaScript数组方法 WEB前端开发社区 2021-10-12 什么是数组方法? 数组方法是 JavaScript 内置的函数,可以应用于数组.每种方法都有一个独特 ... JavaScript执行机制浅谈 JS是单线程 JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. 这是因为Javascript这门脚本语言诞生的使命所致--JavaScript是为处理页面中用户的交互, ... JavaScript事件详解B - 坐标 事件对象常用的属性 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型.以及其它与特定事件相关的信息. 通过事件绑定的执行函数是可以得到一个 ... 从历史事件详解周易六十四卦的“卦象”! 这几年西方的占星术在我们国内很热门,甚至一度超过我们祖祖辈辈最亲近的"四柱八字"和"周易预测". 其实我们中国传统的预测学要比占星术厉害很多,只是国人不懂而已. ... 荣誉的叛国者——德国“720事件”详解(上) 1944年7月20日,施陶芬贝格上校刺杀希特勒,是被人所周知的15次刺杀希特勒的行动中最为知名的一次.但是,因为德国民众的哲学基因以及二战后两个德国的意识形态的宣传,对"720事件" ... 荣誉的叛国者——德国“720事件”详解(中) 瓦尔基里 实际上,在1944年7月20日以前,低级国防军将领一共组织了6次刺杀希特勒的行动,前文的"闪电行动"即是其中之一.但是种种刺杀行动要不是因为执行者临时胆怯,要不是由于希特 ... 荣誉的叛国者——德国“720事件”详解(下) 荣誉的叛国者--德国"720事件"详解(上) 荣誉的叛国者--德国"720事件"详解(中) 事件的后续 炸弹爆炸时,施陶芬贝格上校和费尔吉贝尔将军在后者的办公室 ... 事件详解C - 键盘事件及事件流 键盘事件 格式:document.键盘事件 1.onkeypress; 按下字符键触发 2.onkeydown; 按下任意键触发 先来看onkeypress和onkeydown: 运行结果如 ... 事件详解D - 默认行为及DOM2事件 浏览器的默认行为 JavaScript事件本身所具有的属性,例如 a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 阻止默认行为的方式: event.preventDefault ... JS-JavaScript事件详解 JS运行和编译 语法分析 查找基本语法有没有错误 预解析 执行之前进行预解析 var.function关键字提前到当前作用域的顶部,变量默认值为undefined,函数默认值为函数体代码块,当函数与变 ... C# 中的委托和事件(详解) 很不错 C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...