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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php中设置多级目录session的问题
2011/08/08 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python内存管理机制原理详解
2019/08/12 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python爬虫 requests-html的使用
2020/11/30 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
Java如何格式化日期
2012/08/07 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
安全生产演讲稿
2014/05/09 职场文书
python实现监听键盘
2021/04/26 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis