JavaScript 中的事件介绍及事件流
一.事件类型
1.事件类型
(1)事件的定义:
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
①事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，即用特定的名字来标识所谈论的特定类型的事件
②事件目标：事件目标是发生的事件或与之相关的对象,常用的事件:如:document…window 上的 load 事件或者链接的 click 事件,在客户端 js 的应用程序中，Window、Document、和 Element 对象
eg: window.οnlοad=function(){}事件的目标
window 表示的是时间的目标
onload 表示的是事件的类型
function(){ } 表示事件的处理程序
③事件处理程序或事件监听程序：我们用户在页面中进行的点击这个动作，鼠标响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
④事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性
⑤事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程。
2.事件模型
内联模型: 这种模型是最传统接单的一种处理事件的方法在内联模型中，指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离, 所以不建议使用, 要保证页面的简洁性,以及体验度.
脚本模型: 源于内联模型违反了html和JS的分离原则,为了解决这个问题,所以将处理程序以脚本的形式嵌入页面
DOM2 模型: “DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡/捕获的布尔值(true 表示捕获，false 表示冒泡)
3.传统的事件类型
注意事项:
所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如 click 事的事件处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效
① 鼠标事件
案例:
<script type="text/javascript">
window.onload=function(){
var divElement=document.getElementsByClassName('div1')[0];
divElement.onclick=function(){//添加匿名处理程序
divElement.style.background='cornflowerblue';//当单击鼠标左键时背景颜色变为蓝色
}
divElement.ondblclick=function(){//双击鼠标时背景颜色变为绿色
divElement.style.background='green';
}
divElement.onmousedown=function(){//按下鼠标左(右)时div的宽高变为200px
divElement.style.width=200+'px';
divElement.style.height=200+'px';
}
divElement.onmouseenter=function(){//鼠标悬停时画圆,且将光标以链接指针(一只手)显示
divElement.style.borderRadius=50+'%';
divElement.style.cursor='pointer';
}
divElement.onmouseleave=function(){//鼠标移除时背景颜色变为黄色
divElement.style.background='yellow';
}
divElement.onmousemove=function(){//鼠标被移动时画圆角
divElement.style.borderRadius=30+'%';
}
divElement.onmouseup=function(){//鼠标键被松开时,位移100px
divElement.style.transform='translate(100px)';
}
divElement.onmouseout=function(){//鼠标移出时div扩大2倍
divElement.style.transform='scale(2)';
}
divElement.onmousewheel=function(){//鼠标滑轮滚动时div宽度变为260px
divElement.style.width=260+'px';
}
divElement.oncontextmenu=function(){//点击鼠标右键背景颜色变为红色
divElement.style.background='red';
}
}
</script>
</head>
<body>
<div class="div1" style="width:300px;height:300px;border:1px solid black;"></div>
</body>②键盘事件
案例
<script type="text/javascript">
window.onload=function(){
var test=document.getElementById('text1');
var span=document.getElementById('span1')
// test.onkeydown=function(){
// span.innerHTML='请填写个人信息 按下时发生';
// }
test.onkeypress=function(){
span.innerHTML='请完善个人信息 按下并松开时发生';
}
// test.onkeyup=function(){
// span.innerHTML='请确认个人信息 松开时发生';
// }
}
</script>
</head>
<body>
<input type="text1" name="" id="text1" value="" />
<span id="span1"></span>
</body>③事件对象 Event
定义:在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含所有与事件有关的信息,包括导致事件的元素,事件的类型以及其他与特定事件相关的信息
event常用的属性:
1.oEvent.type----获取绑定的事件类型
2.oEvent.target(在低版本中用event.srcElement)----返回触发事件的元素
3.oEvent.currentTarget(ie低版本中不存在)----表示当前所绑定事件的元素
<script type="text/javascript">
window.onload=function(){
document.onclick=function(ev){
//将事件的对象参数ev 或者event添加给变量oEvent;
var oEvent=ev || event;
//通过设置oEvent.target 或者oEvent.srcElement 返回触发事件的元素
var onCurrent=oEvent.target || oEvent.srcElement;
console.log(onCurrent); //返回结果为:"[object HTMLInputElement]"
//表示当前所绑定事件的元素
console.log(oEvent.currentTarget); //返回结果为:"[object HTMLDocument]"
console.log(oEvent.type); //输出结果为:"click"
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="事件处理程序" />
</body>④目标事件
⑤表单事件
案例:
<script type="text/javascript">
window.onload=function(){
// 获取form表单,从而添加提交事件
var form=document.getElementById('form1');
form.onsubmit=function(){
//表示通过name获取表单元素的值
var name=document.form1.text1.value;
alert(name);
}
}
</script>
</head>
<body>
<form name="form1" action="" id="form1" method="post">
<input type="text" value="" name="text1" />
<br />
<input type="submit" name="submit_01" value="提交"/>
</form>
</body>二,事件流
1.概念:事件流描述的是从页面中接收事件的顺序,当几个都具有事件的元素层叠在一起时，当点击其中一个元素，层叠在点击范围的所有元素都会触发事件。
2.分类:主要包含:冒泡和捕获
事件捕获：父级元素先触发，子集元素后触发,按照由外向内的顺序触发；
事件冒泡：子集元素先触发，父级元素后触发,按照由内向外的顺序触发；
案例:事件冒泡的传统方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡的传统写法</title>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('father');
var div2=document.getElementById('son');
div1.style.width=400+'px';
div1.style.height=300+'px';
div1.style.border='1px solid red';
div2.style.width=200+'px';
div2.style.height=200+'px';
div2.style.border='1px solid red';
div1.onclick=function(){
div1.style.background='lightblue';
}
div2.onclick=function(){
div2.style.background='yellow';
}
}
</script>
</head>
<body>
<div id="father">
<div id="son">子元素冒泡</div>
</div>
</body>
</html>
案例2.冒泡的经典写法
包含输出到页面和控制台(console.log)的两种效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
//创建一个数组,将获取到的对象div1,div2,document,document.body
var arr=[div1,div2,document,document.body];
for(var i=0;i<arr.length;i++){
//给每个数组添加点击事件
arr[i].onclick=function(){
alert(this);
// console.log(this);
}
//使用DOM经典方式
//事件冒泡
arr[i].addEventListener('click',function(){
// console.log(this);
alert(this);
},false);
//事件捕获
arr[i].addEventListener('click',function(){
// console.log(this);
alert(this);
},true);
}
}
</script>
</head>
<body >
<div id="div1" style="width: 100px;height: 100px;border: 1px solid red;">
<div id="div2" style="width: 50px;height: 50px;background:lightblue;">内部元素</div>
</div>
</body>
</html>
欲知后事(时间兼容) 请看下章分解
2448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
