<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS事件</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<!-- 最简单的注册事件 -->
<input id="btn0" type="button" value="click" onclick="btnClick();" />
<!-- 属性绑定事件 -->
<input id="btn1" type="button" value="click1" />
<!-- 使用addEventListener/attachEvent注册事件 -->
<input id="btn2" type="button" value="click2" />
<input id="btn3" type="button" value="click3" />
<!-- 测试删除事件 -->
<input id="btn4" type="button" value="click4" />
<!-- 测试removeEventListener/detachEvent删除事件 -->
<input id="btn5" type="button" value="click5" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
js是一门事件驱动的语言,我们平常的开发都跟事件息息相关.
也就是说js事件是js与浏览器交互的主要途径.
给dom注册事件的方法有至少3种,各种都有所区别.
*/
/*
直接通过元素事件属性绑定事件,这个是最简单最粗暴的方法了.
*/
function btnClick(){
console.log("btn click!");
}
/*
一般不建议使用这种方法,因为这样会让代码的耦合度边高.
当函数名称需要修改的时候,就必须修改html和js两块代码.
*/
/*
直接在dom属性上绑定事件.
*/
var btn1 = document.getElementById("btn1");
//绑定事件
btn1.onclick = function(evt){
//ie触发事件后,没有evt参数,需要使用event对象
evt = evt || event;
console.log(evt);
}
/*
我们知道在不同的浏览器上注册事件,需要采用不同的函数.
但是直接在属性上绑定是兼容所有浏览器的,IE,FF,Chrome,都是可以的.
疑问来了,既然这样又方便还兼顾兼容性,为什么我们还需要采用addEventListener/attachEvent.
因为采用属性绑定事件会覆盖前一个事件,这是js的一个特性,后面加载的对象会覆盖前面加载的对象.
*/
//绑定事件
btn1.onclick = function(evt){
evt = evt || event;
console.log("btn1 click");
}
//这样点击btn1之后,只会输出btn1 click,前一个绑定的onclick就被覆盖了.
/*
通常我们都是采用addEventListener/attachEvent来注册元素的事件,
addEvenetListener是W3C的标准函数,attachEvent是IE遗留的函数.
addEvenetListener(type,fn,useCapture),useCapture是设置事件触发阶段,false/true 冒泡/捕获.
一般情况我们都采用冒泡的时候响应事件.
attachEvent(type,fn),这个没有第三个参数,不能设置触发阶段,所以IE系列只能响应冒泡阶段.
另外还有一个区别就是注册事件类型需要添加on前缀,W3C的标准的不用,例如click/W3C onclick/IE.
*/
var btn2 = document.getElementById("btn2");
if(document.addEventListener){
//非IE
btn2.addEventListener("click",function(evt){
evt = evt || event;
console.log("btn2 click");
},false);
}
else{
//IE
btn2.attachEvent("onclick",function(evt){
evt = evt || event;
console.log("btn2 click");
});
}
/*
通过属性绑定事件,并不能覆盖通过addEventListener/attachEvent注册的事件
*/
btn2.onclick = function(evt){
evt = evt || event;
console.log("btn2 click2");
}
/*
由于注册事件方法需要兼容不同浏览器,所以我们又可以尝试给封装一下.
注册事件需要随时都可能调用,类似一个工具函数,不需要保存任何状态,那么我们采用单例模式.
*/
/*
简单分析一下,注册事件需要三个参数,然后通过addEventListener/attachEvent注册事件.
*/
function addEvent(dom,type,fn){
if(document.attachEvent){
//IE
dom.attachEvent("on" + type,fn);
}
else{
//非IE
dom.addEventListener(type,fn,false);
}
}
var btn3 = document.getElementById("btn3");
//注册事件
addEvent(btn3,"click",function(evt){
console.log("btn3 click");
});
/*
给单个dom绑定事件,这样貌似问题就不大了,但是有时候我们是需要给多个元素同时绑定事件的.
那我们需要给dom这个参数改进一下.
*/
function addEvent(dom,type,fn){
function bind(dom,type,fn){
if(document.attachEvent){
//IE
dom.attachEvent("on" + type,fn);
}
else{
//非IE
dom.addEventListener(type,fn,false);
}
}
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//注册事件
bind(el,type,fn);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//注册事件
bind(dom,type,fn);
}
}
}
//测试一下,这样我们就给全部的dom元素都绑定的click事件.
var btns = document.getElementsByTagName("*");
addEvent(btns,"click",function(evt){
evt = evt || event;
//console.log(evt.currentTarget.nodeName);
});
/*
有一点需要提一下,通过addEventListener/attachEvent注册事件,是不会覆盖前一个注册事件的,
所以注册多次就会响应多个事件函数.
*/
/*
删除注册事件,也需要区分浏览器.
w3c使用removeEventListener(type,fn,useCapture),跟注册接口对应也接收三个参数.
ie使用detachEvent(type,fn).
*/
var btn4 = document.getElementById("btn4");
btn4.onclick = function(evt){
evt = evt || event;
console.log("btn4 click");
}
//直接绑定事件,直接置成null就能删除事件.
btn4.onclick = null;
var btn5 = document.getElementById("btn5");
//采用匿名函数的方式注册事件,是没办法移除的.
addEvent(btn5,"click",function(evt){
console.log("btn5 click");
});
//这样移除事件是无效的,第二个参数必须是跟注册同一个函数才行.
if(document.detachEvent){
//IE
btn5.detachEvent("click",function(){});
}
else{
//非IE
btn5.removeEventListener("click",function(){},false);
}
function btnClick(evt){
console.log("btn5 click2");
}
//再给btn5注册一个事件
addEvent(btn5,"click",btnClick);
//这样注册事件才可以被移除
if(document.detachEvent){
//IE
btn5.detachEvent("click",btnClick);
}
else{
//非IE
//需要注意下第三个参数,如果注册的冒泡阶段,移除也需要指定为冒泡阶段,不然也是无效的.
btn5.removeEventListener("click",btnClick,false);
}
/*
发现移除事件的方法也需要区分浏览器,参数也不一样,这样的情况就有必要封装一下了.
仿造addEvent封装一个.
*/
function removeEvent(dom,type,fn){
function unbind(dom,type,fn){
if(document.attachEvent){
//IE
dom.detachEvent("on" + type,fn);
}
else{
//非IE
dom.removeEventListener(type,fn,false);
}
}
//判断dom是否有多个
if(dom.length){
for(var i = 0,len = dom.length; i < len; i++){
var el = dom[i];
//判断是否是dom
if(el && el.nodeName){
//移除事件
unbind(el,type,fn);
}
}
}
else{
//判断是否是dom
if(dom && dom.nodeName){
//移除事件
unbind(dom,type,fn);
}
}
}
//再给btn5注册一个事件
addEvent(btn5,"click",btnClick);
//移除btn5注册事件,这样看起来就清爽很多了.
removeEvent(btn5,"click",btnClick);
/*
事件注册和事件移除都是属于事件的操作,我们也可以把两个函数封装到一个函数中去.
这里就不讲了,后面自定义事件封装就比较类似了.
*/
/*
知识点:
1.绑定事件的三种方式.
2.不同绑定的方式,各有优缺.
3.采用事件接口绑定事件,需要区分浏览器.
4.移除事件的时候,需要注意不能移除匿名函数,还需要跟事件冒泡/捕获对应.
*/
</script>
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
1. **JavaScript事件基本概念**： - **事件**：是用户或浏览器对网页进行某种操作时触发的特定时刻，例如点击、滚动、提交表单等。 - **DOM事件流**：描述了事件如何在HTML元素层级上传播。它包括捕获阶段、目标...
1. 直接将 JS 代码写在 HTML 上：这种方式是最早的写法，直接将 JavaScript 代码写在 HTML 元素的 onclick 属性中。 2. 定义一个函数，赋值给 html 元素的 onXXX 属性：这种方式比第一种方式好一些，因为它把业务...
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件是网页中发生的特定情况，例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器，我们可以在这些事件发生时执行相应的代码。常见的事件包括： 1. click：鼠标点击事件 2. keydown/keyup：键盘...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户提及的一个相关技术栈）、“web”（Web开发）以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
如何给javascript js事件传递参数.zip
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
本篇文章将深入探讨如何使用JavaScript来监听和处理键盘事件，以及如何结合jQuery库（如`jquery-1.2.6.js`）和第三方插件（如`jquery.hotkeys.js`）来增强键盘控制的功能。 一、原生JavaScript键盘事件 1. `...
全面，直观javascript的事件
### 知识点详解：JS捕获后台事件 #### 一、概述 在现代Web开发中，JavaScript（简称JS）是实现网页动态交互的核心技术之一。通过JavaScript，开发者可以为网站添加各种各样的功能和效果，提升用户体验。本文将重点...
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件，专为开发者设计，用于快速集成到各种Web应用中，实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
1. **创建事件**：`eventjs`提供了一个`create`方法来创建新的事件类型。例如： ```javascript const myEvent = eventjs.create('myCustomEvent'); ``` 2. **订阅事件**：然后，我们可以通过调用`on`方法来订阅...
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...