开发者社区> leanring> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【JavaScript】事件

简介:
+关注继续查看
	“事件”这一名词,在我们看来,已经是非常熟悉的了。在C/S项目中,我们都是通过触发各种事件来实现各种功能的。比如说:按钮点击事件,窗体加载事件等。而在B/S项目中,同样有事件这一概念。这篇博客就对JavaScript视频中关于事件的知识点做个总结。
 		导图中是视频(63-68集)关于讲解事件的全部内容,下面再具体总结一下。
	抽象部分
	一.JavaScript事件
	它是由访问Web页面的用户引起的一系列操作。例如:用户点击。当用户点击执行某些操作的时候,再去执行一系列代码。
	二.JavaScript有三种事件模型
	内联模型、脚本模型和DOM2模型。
	比较:内联模型与脚本模型
	内联是和HTML混写的,没有与HTML分离。
	举例:

//HTML中把事件处理函数作为属性执行JS代码(内联模型)
<input type="button" value="按钮" onclick=“alert('Lee');"/>
//在JavaScript中处理事件(脚本模型)
var input=document.getElementsByTagName('input')[0];
input.onclick=function(){
alert('Lee');
};
	三.JavaScript可以处理的事件类型
	鼠标、键盘和HTML事件。
	下面各列举几个实例:
	1.鼠标事件
	click:点击鼠标或按回车触发
input.onclick=function(){
    alert('Lee');
};
	mousedown:按下未弹起触发
input.onmousedown=function(){
    alert('Lee');
};
	2.键盘事件
	keydown:按任意键触发,如果不放,则重复触发
onkeydown=function(){
    alert('Lee');
};
	keyup:释放键盘上的键触发
onkeyup=function(){
    alert('Lee');
};
	3.HTML事件
	load:页面完全加载后在window上触发
window.onload=function(){
    alert('Lee');
};
	change:当文本框内容改变且失去焦点后触发
input.onchange=function(){
    alert('Lee');
};
	submit:当用户点提交按钮在<form>元素上触发
form.onsubmit=function(){
    alert('Lee');
};
	具体部分
	一.事件对象
	一般称作为event对象,它是浏览器通过函数把这个对象作为参数传递过来的。
	二.鼠标事件
	获取按钮信息
	获取屏幕坐标
	修改键
	三.键盘事件
	键码:发生keydown和keyup事件时,event对象的keycode属性中会包含一个代码,与键盘上一个特定的键对应。
	字符编码:发生keypress事件,event对象charCode属相包含键所代表字符的ASCII编码。
	四.事件流
	包括两种模式:冒泡与捕获
	事件冒泡是从里往外逐个触发,事件捕获是从外往里逐个触发。现代浏览器默认都是冒泡模型。
		绑定部分
	一.传统事件绑定问题
	问题一:一个事件处理函数触发两次事件。当两个JS同时执行的时候,后面一个会把前面一个完全覆盖掉。
	解决:
	执行前先判断之前是否有window.onload,创建一个保存器,把之前的window.onload保存起来。
	代码:
window.onload=function(){                     //第一个要执行的事件
    alert('Lee');
};
if (typeof window.onload=='function'){    //判断之前是否有window.onload
    var saved=null;                                    //创建一个保存器
    saved=window.onload;                        //保存之前的window.onload
}
window.onload=function(){                     //最终一个要执行事件
    if(saved)saved();                                 //执行之前一个事件
    alert('Mr.Lee');                                     //执行本事件的代码
};
	问题二:事件切换器在扩展时,之前的会被覆盖。或者解决覆盖问题后,就必须包含同时执行,又出新问题。
	解决:创建一个自定义的事件处理函数
	代码:
function addEvent(obj,type,fn){               //取代传统处理函数
    var saved=null;                                   //保存每次触发的事件处理函数
    if (typeof obj['on'+type]=='function'){  //判断是不是事件
        saved=obj['on'+type];                   //如果有,保存
    }
    obj['on'+type]=function(){
        if(saved)saved();                            //执行上一个
        fn.call(this);                                    //执行函数,传递this
    };
}
addEvent(window,'load',function(){        //执行
    alert('Lee');
});
addEvent(window,'load',function(){        //执行
    alert('Mr.Lee');
});
	二.W3C事件处理函数
	W3C现代事件绑定好处:不需要自定义;可以屏蔽相同的函数;可以设置冒泡和捕获
	三.IE事件处理函数
	IE不支持捕获;添加事件不能屏蔽重复的函数;this指向的是window而不是DOM对象;在传统事件上,IE无法接受到event对象。
	学习这部分内容,其实很多东西都是很有共鸣的。但后面的一些事件流,自定义,(添加超链接)IE与W3C间的比较的知识,好像使得学习困难了些,总结的时候也不知道该如何去写,只能是列举出个大概的标题。这些东西,还是需要在实践中去应用。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript自定义事件
标题JavaScript自定义事件 最近遇到一个基于jQuery项目,项目中的功能节点页面都是通过iframe实现,但是各个iframe之间有时需要相互通信,互相相应一些事件,为了更愉快的编码所以想到了自定义事件,还别说用起来竟然有点像vue的组件通信 top.
748 0
剑指Offer——和为S的两个数字(JS实现)
剑指Offer——和为S的两个数字(JS实现)
52 0
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇       守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨。
881 0
Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上,其中有一个对象的数量很多,上万了吧,通过上述的方式无法在地图上进行展示,就想到了聚类,当时由于技术和时间的关系,没有实现,最 近,稍微有点先下时间,就又想起这事,继续研究,终于,皇天不负有心人,出来了,出来的第一时间写出来,以便大家使用。
1101 0
Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
原文:Arcgis for JS之Cluster聚类分析的实现(基于区域范围的) 咱们书接上文,在上文,实现了基于距离的空间聚类的算法实现,在本文,将继续介绍空间聚类之基于区域范围的实现方式,好了,闲言少叙,先看看具体的效果: 聚类效果 点击显示信息 显示单个聚类点 下面说说具体的实现思路。
1559 0
ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
原文:ArcGIS JS 学习笔记3 实现百度风格的BubblePopup 1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup   2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePopup的HTML代码和CSS代码拷贝下来,这里我无耻的把类名改了,大家不要在意细节。
1104 0
js template实现方法
培训类型:入园-家长会 待回访 ...
852 0
网站实现特定某个地区访问执行跳转(js方法)
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
814 0
+关注
100
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载