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 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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
VFP与其他应用程序的集成
2006/10/09 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python 类的继承实例详解
2017/03/25 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python实现通讯录功能
2018/02/22 Python
Python格式化输出%s和%d
2018/05/07 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
考试作弊检讨书
2015/01/27 职场文书
测量员岗位职责
2015/02/14 职场文书
超市主管竞聘书
2015/09/15 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers