js控制页面的行为是由事件驱动的。
什么是事件?(怎么发生的)
事件就是js侦测到用户的操作或是页面上的一些行为
事件源(发生在谁身上)
引发事件的元素
事件处理程序(发生了什么事)
对事件处理的程序或函数
事件对象(用来记录发生事件时的相关信息)
只有在事件发生的时候,才会产生事件对象,无法手动创建,并且事件对象只能在处理函数内部访问,处理函数允许结束后该对象自动销毁
事件的分类:
鼠标事件:
onclick 单击
ondblclick 双击
onmousedown 按下
onmouseup 抬起
onmousemove 移动
onmouseover 放上去 onmouseenter 进入
onmouseout 离开 onmouseleave 离开
onmousewheel 滚轮事件
onmouseenter和onmouseleave不支持事件冒泡
表单事件:
onsubmit 提交
onfocus 获得焦点
onblur 失去焦点
onchange 改变文本区域的内容
页面事件:
onload 加载完成
。。。
在W3C标准中:事件可以写在行内,但是因为结构和行为要分离,所以我们一半情况下用JS的方法来绑定事件,只有在极少数情况下,才将事件写在行内。
行内事件又叫:HTML事件处理程序
事件的绑定方法:
浏览器中的节点(节点).on事件名 = function(){ 要干什么?(放在浏览器中,不执行,当事件发生的时候再执行) }
总结:事件就是给浏览器定义一个预处理函数,当事件触发的时候,执行函数,这就是事件。在这里插入代码片
举个例子理解一下
老大是浏览器
你是事件源;让你做的事是事件处理程序;走着去 是点击事件等
女秘书,就是事件对象,向你提供完成这件事的所有帮助
每做一件事,老大给配不同的秘书 / 每个事件都有不同的事件对象
通过这个故事可以得知:
1.事件有对象!叫事件对象(event)
2.事件对象是浏览器给的
3.事件对象不叫不出来
什么是event事件对象?
用来记录一些事件发生时的相关信息的对象,每次事件发生的时候,会在函数或方法内部产生一个事件对象,这个事件对象就是event。
特征:
1.只有当事件发生的时候才会产生,只能在处理函数内部访问
2.处理函数运行结束后自动销毁
如何获取
怎么把贴身小秘书event叫出来呢?
如何获取event事件?
事件对象需要作为参数传入事件。
function fn(event){
console.log(event)
}
或者
function(){
console.log(arguments[0])
}
IE中: window.event
正常浏览器中: 对象.on事件 = function(event){}
兼容方式:
function fn(eve){
var e = eve || window.event;
}
document.onclick = function(eve){
var e = eve || window.event;
console.log(e);
}
注意:event需要逐层传递,不要疏忽外部的function
事件还有很多属性和意义,比如 键盘事件,鼠标事件,事件冒泡等,事件的兼容性,在这就不多简述了!!