javascript相关事件的几个概念


Posted in Javascript onMay 21, 2015

客户端javascript程序采用了异步事件驱动编程模型。

相关事件的几个概念:

事件类型(event type):用来说明发生什么类型事件的字符串;

事件目标(event target):发生事件的对象;

事件处理程序(event handler):处理或响应事件的函数;

事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象;

事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程;

注册事件处理程序:

1、设置javascript对象属性;

2、设置html标签属性

3、addEventListener或attachEvent(后者为IE的)

function addEvent(target,type,handler){
   if(target.addEventListener){
     target.addEventListener(type,handler,false);
   }else{
     target.attachEvent("on"+type,function(event){return handler.call(target,event)});
   }
 }

 事件传播的三个阶段:

1、发生在目标处理函数之前,称为‘捕获'阶段;

2、对象本身的处理事件的调用;

3、事件的冒泡阶段;

在javascript中,可以为某个元素指定事件指定的方式有以下三种:

1、在html中,使用onclick属性
2、在javascript中,使用onclick属性
3、在javascipt中,使用addEvenListener()方法

三种方法的比较

(1)在第二、三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以。
(2)首选第二、三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容。

一些语法细节

(1)在第一种方法中,onclick大小写无关,但在第二种方法中,必须使用小写。因为HMTL对大小写不敏感,而JS则会区分大小写。
(2)在第二、三种方法中,指定函数名时没有双引号,而第一种作为一个HTML属性,需要双引号。
(3)第一种方法需要括号,第二、三种不需要。

onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完整代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 
 
</head> 
<body> 
 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
 <button id="jsOnClick">jsOnClick</button> 
 <button id="addEventListener">addEventListener</button> 
  
 <script defer> 
 function clickHandler() { 
 alert("onclick attribute in html"); 
 } 
 function clickHandler2(e) { 
 alert(e.target.innerHTML); 
 } 
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", 
  clickHandler2); 
</script> 
</body> 
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
使用Javascript简单计算器
Nov 17 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
javascript实时显示当天日期的方法
May 20 #Javascript
JavaScript中String.prototype用法实例
May 20 #Javascript
实现无刷新联动例子汇总
May 20 #Javascript
javascript中CheckBox全选终极方案
May 20 #Javascript
javascript消除window.close()的提示窗口
May 20 #Javascript
在JS方法中返回多个值的方法汇总
May 20 #Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 #Javascript
You might like
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
JS中Iframe之间传值的方法
2013/03/11 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python常用知识点汇总
2016/05/08 Python
python正则分析nginx的访问日志
2017/01/17 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
python与字符编码问题
2019/05/24 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
python os.listdir()乱码解决方案
2021/01/31 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
奠基仪式策划方案
2014/05/15 职场文书
大客户经理岗位职责
2015/04/09 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书