目录
2、给HTML绑定事件（写在window.οnlοad=function(){}中）
阻止事件冒泡（event.stopPropagation()）
阻止事件默认行为（event.preventDefault()）
事件三要素
1、事件源：触发事件的对象 ，如按钮对象
2、事件类型：如何触发？触发什么事件？如鼠标点击，键盘按下等
3、事件处理程序：函数
执行事件的步骤
1、获取事件源
2、注册事件（绑定事件）
3、采用函数赋值形式添加事件处理程序
绑定事件
1、向HTML元素中添加事件
1）οnclick='alert(1)'
2）οnclick='test()'
function test(){ //不能写在window.οnlοad=function(){}中，否则会找不到test()函数
alert(1);
}
2、给HTML绑定事件（写在window.οnlοad=function(){}中）
①获取目标对象
var div=document.getElementsByTagName('div')[0];
var btn=document.getElementById('btn');
②设置事件三要素
事件冒泡（由内而外触发事件）
在点击页面中的id为inner的div元素，click事件会以如下顺序发生
div#inner---div#center---div#outer---body---html---document
点击inner，依次执行inner---center---outer
点击center，依次执行center---outer
点击outer，只执行outer
1、DOM0级
2、DOM2级
阻止事件冒泡（event.stopPropagation()）
阻止事件默认行为（event.preventDefault()）
var btn=document.getElementsByTagName('button')[0];
var a=document.getElementsByTagName('a')[0];
btn.οnclick=function(event){
event.preventDefault(); //点击按钮，不再提交到action
}
a.οnclick=function(event){
event.preventDefault(); //点击超链接，不再跳转到href
}
事件捕获（由外向内触发事件）
点击inner，依次执行outer---center---inner
点击center，依次执行outer---center
点击outer，只执行outer
DOM事件流(事件冒泡和事件捕获)
JS事件流:描述的事件在页面中的接收顺序
事件冒泡:最具体的节点第一个接收到事件，最不具体的节点最后一个接收到事件
inner<center<outer<body<html<document 从内向外触发事件
事件捕获:最具体的节点最后一个接收到事件，最不具体的节点第一个接收到事件
document>html>body>outer>center>inner 从外向内触发事件
DOM0级事件和DOM2级事件的区别（追加、绑定、解除）
1、获取按钮
var btn=document.getElementById('btn');
2、DOM0级事件--不可追加事件
绑定：事件源.事件类型=事件处理程序
解绑：事件源.事件类型=null;
3、DOM2级事件--可追加事件
追加：addEventListener(事件类型，事件处理程序，布尔值)
true--在捕获阶段执行，false--在冒泡阶段执行
解绑：removeEventListener(事件类型，事件处理程序(具名函数))
事件代理(事件委托)
将本应该添加给子元素的事件添加给父元素
事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理，也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。
1、获取元素节点
var list = document.getElementById('list'); //父
var one = document.getElementById('one'); //子1
var two = document.getElementById('two'); //子2
var three = document.getElementById('three'); //子3
2、事件代理、事件委托
事件类型
1、鼠标滚动事件onscroll
<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<script>
var d1 = document.getElementById('d1');
d1.onscroll = function () {
console.log('onscroll');
}
</script>
2、焦点事件onbulr、onfocus
blur：当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
focus：当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 失去焦点触发
inp1.onblur = function () {
console.log('失去焦点');
console.log(this.value);
}
// 获得焦点触发
inp1.onfocus = function () {
console.log('获得焦点');
}
</script>
3、鼠标事件
<div id="d1"></div>
<script>
var d1 = document.getElementById('d1');
// 单击事件
d1.onclick = function (event) {
console.log('click');
console.log(event);
}
// 双击事件
d1.ondblclick = function () {
console.log('dblclick');
}
// 鼠标移入事件
d1.onmouseenter = function () {
console.log('mouseenter');
}
// 鼠标移出事件
d1.onmouseleave = function () {
console.log('mouseleave');
}
// 鼠标在元素内部移动时触发
d1.onmousemove = function () {
console.log('mousemove');
}
</script>
4、键盘事件
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 键盘按下事件
inp1.onkeydown = function (event) {
if (event.keyCode == 13) { //回车键
console.log('确认');
console.log(this.value);
}
}
// 持续按下键盘
inp1.onkeypress = function (event) {
console.log(event.keyCode);
}
// 放开键盘
inp1.onkeyup = function (event) {
console.log(event.keyCode);
}
</script>
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
