**JavaScript 中的事件介绍以及兼容
- 事件类型
(1)事件的定义
指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
①事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮，按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论的特定类型的事件
②事件目标：事件目标是发生的事件或与之相关的对象。事件是要添加给哪个对象, 常用的事件目标有window,按钮,文本框,document…
window表示的是事件的目标
onload表示的是事件的类型
=号之后的函数表示的是 事件的处理程序
window.οnlοad=function(){}
③事件处理程序或事件监听程序：我们用户在页面中进行的点击这个动作，鼠标响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
④事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性
⑤事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程。
(2)事件模型
- 内联模型这种模型是最传统接单的一种处理事件的方法在内联模型中，指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离, 所以不建议使用, 要保证页面的简洁性,以及体验度.
- 脚本模型
源于内联模型违反了html和JS的分离原则,为了解决这个问题,所以将处理程序以脚本的形式嵌入页面 - DOM2 模型
“DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的
操作：
addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true 表示捕获，false 表示冒泡)
(3)传统的事件类型
注意事项:
所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如 click 事的事件处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效
① 鼠标事件
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
//获取页面div元素
var divelment=document.getElementsByClassName('div01')[0];
//给获取到的div元素注册/添加一个鼠标点击事件,也可理解为添加一个监听的处理程序
divelment.onclick=function(){ //添加匿名的处理程序
divelment.style.background='pink';
}
//添加鼠标双击事件
divelment.ondblclick=function(){
divelment.style.background='red';
}
//添加鼠标按下事件
divelment.onmousedown=function(){
divelment.style.borderRadius=30+'px';
}
//添加鼠标移动到元素上触发
divelment.onmouseenter=function(){
divelment.style.width=200+'px';
}
//添加鼠标移出元素时触发
divelment.onmouseleave=function(){
divelment.style.width=50+'px';
}
//添加鼠标被移动
divelment.onmousemove=function(){
divelment.style.background='blue';
}
//添加鼠标移到某元素之上
divelment.onmouseover=function(){
divelment.style.borderRadius=50+'%';
}
//添加鼠标从某元素移开
divelment.onmouseout=function(){
divelment.style.background='black';
}
//添加鼠标按键被松开
divelment.onmouseup=function(){
divelment.style.height=50+'px';
}
//添加鼠标滑轮事件
divelment.onmousewheel=function(){
divelment.style.background='blueviolet';
}
//延伸:鼠标前后滑动改变div的背景颜色
divelment.onmousewheel=function(){
if(event.wheelDelta>0){
divelment.style.background='blueviolet';
}else{
divelment.style.background='pink';
}
}
}
</script>
</head>
<body>
<div class="div01" style="width: 100px;height:100px; border: 1px solid red;"></div>
</body>
</html>
②键盘事件
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
var text1=document.getElementById('txt1');
var span=document.getElementById('span1');
//添加某个键盘按钮被按下
text1.onkeydown=function(){
//在键盘按下时,将信息(填入完整的内容)写进span中
span.innerHTML='填入完整的内容';
}
//添加某个键盘按钮被松开
text1.onkeyup=function(){
span.innerHTML='填入完整的内容 松开发生';
}
//添加某个键盘按钮被按下并松开 需按回车键
text1.onkeypress=function(){
span.innerHTML='添加某个键盘按钮被按下并松开'
}
//案例:(event:表示的是为事件提供数据)获取上下键
text1.onkeyup=function(event){
// alert(event.keyCode);
if(event.keyCode==38){
alert('用户按下键盘字符 上键');
}else if(event.keyCode==39){
alert('用户按下键盘字符 右键');
}else if(event.keyCode==40){
alert('用户按下键盘字符 下键');
}else{
alert('用户按下键盘字符 左键');
}
}
/*text1.onmousemove=function(event){
// alert(event.pageX);
//提供鼠标的位置信息
document.write(event.pageX+'<br />');
}*/
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<span id="span1"></span>
</body>
</html>
③事件对象 Event
什么是事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含所有与事件有关的信息,包括导致事件的元素,事件的类型以及其他与特定事件相关的信息
event对象的兼容写法
event 事件对象不能兼容所有的浏览器，我们一般是采用下面这种方式进行兼容。
var oEvent=ev || event; 如果参数不是 ev 而是 event 的时候，兼容方式也可以写成下面这种格式。
document.onclick=function(event){
var oEvent=event || window.event; console.log(oEvent);
测试代码:
<script>
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev || event;
console.log(event);
}
</script>
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 TMLInputElement]"
//表示当前所绑定事件的元素
console.log(oEvent.currentTarget); //返回结果为:"[object TMLDocument]"
console.log(oEvent.type); //输出结果为:"click"
}
}
</script>
④目标事件
⑤表单事件
JavaScript 中常用事件的使用案例
onsubmit：表单中的确认按钮被点击时发生的事件，如下案例。
案例解析：弹出表单中提交的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</html>
onblur：在对象失去焦点时发生的事件，onfoucs：在对象获得焦点时发生的事件，案例为鼠标离开(失去焦点)文本框1的时候,将其文本框值转换为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function blur_01(value){
//函数之间的调用
textupper(value); //在一个函数中调用另外的一个函数
}
//以下的这个函数是用来转换大写的函数
function textupper(value){
document.write(value.toUpperCase());
}
function focus_01(color){
// document.getElementById('fname').style.background=color;
var color1=document.getElementById('fname');
color1.style.background=color;
}
</script>
</head>
<body>
<!--blur_01(this.value):this指向的是事件的目标,这里是第一个input文本框-->
<p>请输入你的英文名字:<input type="text" id="fname" onfocus="focus_01('red');" onblur="blur_01(this.value)"/></p>
<p>请输入你的年龄:<input type="text" id="age"/></p>
</body>
</html>
2338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
