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一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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 CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
简单实现js浮动框
2016/12/13 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
选购到合适的激光打印机
2022/04/21 数码科技
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL