JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件表:
简单点说,事件是‘怎么了’,方法就是‘怎么办’
js中事件分为三大类:鼠标事件、键盘事件、html事件。如:鼠标事件click,当元素容器被点击时,响应
方法呢,就是对一段代码的封装、打包。打个比方,吃kfc,发现有不少的人喜欢点个原味鸡的时候再来个香辣鸡翅、饮料、奥尔良一起吃。所以kfc直接把这几个组一组,弄了一个全家桶,以后遇到类似喜好的人,就让他点这个套餐,方便还有优惠。js中封装函数一个道理,方便调用,减少代码重复度。
一般情况下,事件与方法是连贯使用的,比如登录按钮(button)触发了点击(click)事件,就调用封装好的登录方法(function login(){}),最终完成操作。
<button>登录</button><script>
//添加点击事件
$("button").click(function(){
login()
})
//封装登录方法
function login(){
//登录...
}
</script>
JavaScript中主要的事件有如下这些:
事件的作用:
事件在HTML中扮演着相当重要的作用,要了解他的作用,首先我们了解下事件的概念:
“事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。”
从事件的概念可看出,事件可以大大提高网页的交互性。在上面表格中列出来的事件,我们都可以通过事件处理程序(侦听器)捕捉到。比如当用户点击某个 HTML 元素时启动一段 JavaScript。
为了更通俗的描述事件的作用,下面我列举了几个事件使用的例子:
1、 监听按钮的点击事件onclick,当该事件发生后可以执行JavaScript进行提醒;
alertBtn.onclick = function() {
alert("你在网页中执行了点击操作!")
}
2、 监听页面的加载事件onload,进行一些初始化操作。
window.onload = function() {
prepareEventHandlers()//prepareEventHandlers函数中进行了初始化操作。
}
3、监听表单的onblur事件,当输入框失去焦点时是否显示提示信息。如下面的邮箱输入框:
emailField.onblur = function() {
if ( emailField.value == "") {
emailField.value = "输入邮箱"
}
}
4、监听表单的onfocus事件,当输入框获取焦点时执行一些操作,如清除提示信息。
emailField.onfocus = function() {
if ( emailField.value == "输入邮箱") {
emailField.value = ""
}
}
可以到教程网-秒秒学上看下相关课程,夯实下基础,事件的机制其实并不难,希望对你理解事件有所帮助。