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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
使用post方法实现json往返传输数据的方法
Mar 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
杏林同学录(一)
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
极简的Python入门指引
2015/04/01 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年外联部工作总结
2014/11/17 职场文书
考察邀请函范文
2015/01/31 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL