这篇文章主要介绍“javascript中常用的事件是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中常用的事件是什么”文章能帮助大家解决问题。
javascript中的常用事件有:1、点击事件(onclick和ondblclick);2、焦点事件(onblur和onfocus);3、加载事件(onload);4、鼠标事件;5、键盘事件;6、选择和改变事件;7、表单事件。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
JS中的事件:
概念:某些组件被执行了某些操作后,触发某些代码的执行。
事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
事件源:组件。如: 按钮 文本输入框…
监听器:代码。
注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
1)点击事件:
onclick:单击事件
ondblclick:双击事件
2)焦点事件
onblur:失去焦点
onfocus:元素获得焦点。
3)加载事件:
onload:一张页面或一幅图像完成加载。
4)鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
5)键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
6)选择和改变事件
onchange 域的内容被改变。
onselect 文本被选中。
7)表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
3.1、什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
3.2、注册事件的两种方式(静态注册事件、动态注册事件)
静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
function sayHello() { alert("hello js!"); } <!--注册事件的第一种方式,直接在标签中使用事件句柄--> <!--以下代码的含义是:将sayHello函数注册到钮上,等待click事件发生之后, 该函数被浏览器调用。我们称这个函数为回调函数。--> <input type="button" value="hello" onclick="sayHello()"/>
动态注册事件: 是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 =function(){}这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名 =fucntion(){}
<!--第二种注册事件的方式,是使用纯JS代码完成事件的注册。--> <input type="button" value="hello1" id="mybtn1"/> <input type="button" value="hello2" id="mybtn2"/> <input type="button" value="hello3" id="mybtn3"/> <script type="text/javascript"> function dynamic(){ alert("动态注册事件1"); } // 第一步:先获取这个钮对象() /* document:是 JavaScript语 言 提 供 的 一 个 对 象 ( 文 档 ), document是 JavaScript语 言 提 供 的 一 个 对 象 ( 文 档 ), get: 获 取 Element:元 素 ( 就 是 标 签 By:通 过 。 。 由 。 。 经 。 。 。 Id: id 属 性 getElementById: 通 过 id 属 性 获 取 标 签 对 */ var btnobj1 = document.getElementById("mybtn1"); // 第二步:给钮对象的onclick属性赋值 btnobj1.onclick = dynamic;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法. // 这行代码的含义是,将回调函数doSome注册到click事件上. var btnobj2 = document.getElementById("mybtn2"); btnobj2.onclick = function(){// 这个函数没名字,叫做匿名函数,这个匿名函数也是一个回调函数. alert("动态注册事件2");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用. } document.getElementById("mybtn3").onclick = function () { alert("动态注册事件3"); } </script>
通过keydown事件演示回车键13,ESC键27
<body> <script type="text/javascript"> // 回车键的键值是13 // ESC键的键值是27 window.onload = function () { /* var keyvalue = document.getElementById("key"); keyvalue.onkeydown = function (event) { // 获取键值对象 alert(event);// 什么键显示都为[object KeyboardEvent] // 对于“键盘事件对象"来说,都keyCode属性用来获取键值. alert(event.keyCode);//回车键显示13 } */ var keyvalue = document.getElementById("key"); keyvalue.onkeydown = function (event) { if(event.keyCode == 13){ alert("正在进行验证") } } } </script> <input type="text" id="key"/> </body>
关于“javascript中常用的事件是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。