js中的事件部分总结
一、HTML事件
HTML事件处理就是直接在HTML标签上添加事件,举例
<p class="" onclick=function(){alert(HTML事件)}></p>
这种方式的好处是简单易懂,兼容性好。
缺点是代码的耦合性太高,不便于修改,而且一个事件只能监听一个function,多个function会被覆盖,并且事件无法删除。
二、DOM 0级处理事件
DOM 0级处理事件可以理解成通过修改标签元素的onclick属性,来加入事件。 举例
<div id="btn"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){alert(DOM 0级事件)}
</script>
删除方式为
btn.onclick=null;
这种方式的优点是耦合较低,产生的问题是只能监听一个事件,容易被覆盖。
三、DOM 2级处理事件(重点)
DOM 2级处理事件是通过addEventListener(参数一,参数二,参数三)的方式添加事件
其中
参数一:事件类型,如onclick onload,但在参数一种,前面的On 需要省略。
参数二:回调函数:可以直接为某个function(){},也可以将函数提取,直接写函数名,不必添加括号
参数三:定义冒泡或捕获,true为捕获,false为冒泡,考虑到兼容器的问题(IE 678只支持冒泡,不支持捕获)在这里推荐使用false——冒泡
function Dom(){alert(“DOM 2级处理事件”)}
addEventListener("click",Dom,false);
这里删除监听的方式为
removeEventListener("click",Dom,false);
DOM 2级处理事件的有点是不会被覆盖,一次性可以添加多个监听事件,缺点是IE 8之下不可用(IE 8之下使用IE事件的处理程序)
四、 IE事件的处理程序(补充)
IE 6 7 8 9 10都支持的一种专属事件方式,通过attachEvent添加事件
举例
attachEvent(参数一,参数二)
其中参数一为事件类型,但和DOM 2级事件不同,这里的事件类型前面需要加上On
参数二为回调函数
因为是IE专属,默认为冒泡处理,所以没有参数三
举例:
function Ie(){alert(IE专属事件)}
btn.attachEvent("onclick",Ie);
删除事件用detachEvent
btn.detachEvent("onclick",Ie);
js中的事件部分总结的更多相关文章
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 看懂此文,不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- js中的事件,内置对象,正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
随机推荐
- ARM: STM32F7: hardfault caused by unaligned memory access
ARM: STM32F7: hardfault caused by unaligned memory access ARM: STM32F7: 由未对齐的内存访问引起的hardfault异常 Info ...
- python pandas根据首字母选行
ret2.loc[ret2['INNERCODE'].map(lambda x:x[0]=='6' or x[0]=='3' or x[0]=='0' ),:]和matlab不一样的风格 - -直接用 ...
- Linux 设备驱动程序 字符设备
已经无法再精简,适合入门. #include<linux/module.h> #include<linux/init.h> #include<asm/uaccess.h& ...
- Jquery下拉列表添加移除数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android基础:startActivityForResult 和 onActivityResult 问题
项目中用到弹出Acitivity来获得用户输入 所以用到 onActivityResult()方法接受用户输入 奇怪问题 startActivityForResult() 后直接调用 onActivi ...
- WebStorm调试node.js
直接上图:
- Switch图形练习
//package IfAndSwitchs;import java.util.Scanner; public class Mianji { public static void main(Strin ...
- I/O Directory类
Directory类 Directory类位于System.IO 命名空间.Directory类提供了在目录和子目录中进行创建移动和列举操作的静态方法.此外,你还可以访问和操作各种各样的目录属性. 1 ...
- http://tool.oschina.net 在线API文档库java jquery ,php,很全的文档库
http://tool.oschina.net 1.6API文档(中文)的下载地址: ZIP格式:http://download.java.net/jdk/jdk-api-localizations ...
- Javascript DOM编程艺术 语法部分
1.变量,可以变化的东西我们称为变量,随着年龄的增大,我们的age不断变大 2.Javascript变量声明用var,可以不声明变量类型.尽量声明为一个字符串字面量. 3.弱类型:要求程序员必须明确的 ...