事件:
事件驱动三要素:
事件源:触发事件的那个元素事件类型:被js监测到的行为事件处理函数:当事件发生时要进行的处理(事件句柄 || 监听器)
绑定事件监听器
<ele onclick
= "fn()">
ele
.onclick = function(){}
ele
.addEventListener("type",function(){},boolean
)
btn
.addEventListener("click",function(){
console
.log(111);
})
删除事件监听
ele
.onclick
= null;
ele
.removeEventListener("type",fn
,boolean
);
事件分类
window 事件
加载事件:onload滚动事件:onscroll窗口尺寸改变事件:onresize 鼠标事件
onclickondbclickonmouseenter onmouseleaveonmousemoveonmouseover onmouseout (会冒泡) 键盘事件
onkeydownonkeyuponkeypress
事件流
事件在页面上的传播顺序
网景 IE 持相反意见
网景:事件是从外向内触发的 (捕获型事件流)
IE:事件是从里往外触发传播的(冒泡型事件流)
标准:在W3C组织下,js同时支持了冒泡和捕获,DOM事件流
ele
.onclick = function(){}
ele
.addEventListener("type",fn
,boolean
)
事件对象 event
脚本引擎在处理js代码时,会自动给事件处理函数提供一个对象,就是event,他记录了关于该事件的相关信息
获取event
现代浏览器 IE9+ 事件处理函数 event低版本 IE window.event
**处理兼容:let e = event || window.event **
事件目标
通过event.target 就可以获取触发事件的目标元素
event.target 和 this 的区别:
this:绑定该事件的标签元素
键盘事件
event.keyCode ASCLL码,键值码event.key 按键名shiftKey altKey …返货布尔值
键盘事件只能绑定在可输入元素身上,和document上
鼠标事件
event
.clientX
,event
.clientY
event
.pageX
,event
.pageY
event
.screenX
,event
.screenY
event
.offsetX
,event
.offsetY
停止事件传播
event
.stopPropagation();
阻止默认事件
event
.preventDefault();
事件委托:
把事件绑定在一个不变的祖先元素身上好处
不用遍历子元素新增元素也可以拥有该事件 原理:利用事件流,只指定一个事件句柄就可以管理某一类所有事件何时
子级太多子级动态生成
表单 form
表单字段:有value值才称为表单字段
inputtextareaselectbuttonfieldset
特殊属性(标志性属性)
autofocus 自动获取焦点disabled 禁用selected 下拉列表默认选中checked 单选多选默认选中readonly 只读multiple 下拉列表多选(按住 shift 实现多选)
事件:
焦点事件
获取焦点:ele.onfocus失去焦点:ele.onblur 改变事件
ele.oninput 输入内容时触发ele.onchange 失焦时如果内容发生改变才触发 提交事件
具有提交功能的按钮点击后触发form元素身上的onsubmit 事件 formEle.onsubmit (鲜少使用) 重置事件
具有重置功能的按钮点击触发form元素身上的onreset事件 formEle.onreset(鲜少使用) 让普通按钮具有提交重置功能
ele
.onclick = function(){
formEle
.reset();
}
ele
.onclick = function(){
formELe
.submit();
}
select
获取所有option:select.options
获取某一个option:select.options[index]
获取选中的option下标:select.selectedIndex
select发生变化时获取到选中的option
select
.onchange = function(){
let i
= select
.selectedIndex
;
console
.log(select
[i
]);
}
获取选中的值:select.value
创建option
let option
= new Option("text","value");
select
.options
.add(option
);
删除:select.options.remove(index)
修改
select
.options
[index
].value
= "beiping";
select
.options
[index
].text
= "北平";