<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery事件</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input id="btn1" type="button" value="btn1" />
<input id="btn2" type="button" value="btn2" />
<input id="btn3" type="button" value="btn3" />
<input id="btn4" type="button" value="btn4" />
<input id="btn5" type="button" value="btn5" />
<!-- 采用onbind注册事件 -->
<input id="btn6" type="button" value="btn6" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
1.jquery事件
*/
//dom加载完成执行事件
$(document).ready(function(){
console.log("onload1");
});
//jquery中还有一种简写,如下
$(function(){
console.log("onload2");
});
/*
这个事件可以在程序中多处实现,按加载顺序执行.
window.onload只能实现一处,后面会覆盖前面的,并且这个执行的时间比jquery-ready要稍晚.
*/
/*
注册事件,bind(types,data,fn),
如果data不传,那么第二个参数可以直接传响应函数,
如果传了第二个参数,第三个就必须传响应函数.
*/
//最简单的注册方式
$("#btn1").bind("click",function(evt){
console.log(this.id + " click");
});
//还有一种map注册方式
$("#btn2").bind({
"click":function(evt){
console.log(this.id + " click");
},
"dblclick":function(evt){
console.log(this.id + " dblclick");
},
"myevent":function(evt,a,b){
console.log("myevent:" + a + "," + b);
}
});
//给响应事件函数传递参数
$("#btn1").bind("click",{"name":"chxy"},function(evt){
//获取传递数据
var data = evt.data;
console.log("name:" + data.name + "," + this.id + " click");
});
//主动触发事件
$("#btn2").trigger("dblclick");
//trigger还可以触发自定义事件和传递参数,注意接收的时候始终都是从第二个开始,第一个是事件对象.
$("#btn2").trigger("myevent",[1,2]);
//移除事件
$("#btn3").bind("click",function(evt){
console.log(this.id + " click");
});
$("#btn3").bind({
"click":function(evt){
console.log(this.id + " click");
},
"dblclick":function(evt){
console.log(this.id + " dblclick");
}
});
//移除元素的某种事件
$("#btn3").unbind("click");
//移除全部元素事件
$("#btn3").unbind();
//如果要移除元素事件绑定的某个函数,就不能绑定匿名函数,否则也不能删除,和原生的removeEventListener类似.
function btnClick(evt){
console.log("btnClick:" + this.id + " click");
}
$("#btn4").bind("click",btnClick);
$("#btn4").bind("click",function(evt){
console.log(this.id + " click");
});
//移除btnClick
$("#btn4").unbind("click",btnClick);
/*
在实际开发过程中,我们经常会碰到作用域的问题.
事件响应后会产生一个新的作用域,有可能我们并不需要这个作用域,而希望得到原来的作用域.
jquery中提供了一个proxy(function,context)接口,可以动态指定作用域.
那么就让我们来封装一个jquery绑定事件接口吧!
*/
//extend,用来扩展jquery的函数.
jQuery.fn.extend({
//绑定事件,我们调整了参数位置,因为我感觉fn,比data重要,scope是作用域
onbind:function(type,fn,scope,data){
//采用proxy改变函数作用域
return $(this).bind(type,data,$.proxy(fn,scope));
}
});
//一个简单的例子
function Test(){}
Test.prototype = {
name:"chxy",
say1:function(){
//this == Test
console.log(this.name + " say1");
},
say2:function(){
//this == btn6
console.log(this.id + " say2");
}
};
var t = new Test();
//采用onbind注册
$("#btn6").onbind("click",t.say1,t);
//bind注册
$("#btn6").bind("click",t.say2);
/*
知识点:
1.dom加载完成之后响应事件,很多时候我们发现页面明明显示了该元素,但是js中缺获取不到,
就要想想是否是在dom还没加载完,你就执行了那段js.
2.jquery绑定事件/移除事件的方法.
3.如何扩展/添加jquery接口.
*/
</script>
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
4. 使用 addEventListener 或 attachEvent：这是目前推荐的方式，可以为元素添加多个事件 handler，支持事件冒泡或捕获。 事件机制的原理是基于浏览器的事件模型，分为两种：冒泡型和捕获型。冒泡型的事件从最具体...
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件是网页中发生的特定情况，例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器，我们可以在这些事件发生时执行相应的代码。常见的事件包括： 1. click：鼠标点击事件 2. keydown/keyup：键盘...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
如何给javascript js事件传递参数.zip
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户提及的一个相关技术栈）、“web”（Web开发）以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
本篇文章将深入探讨如何使用JavaScript来监听和处理键盘事件，以及如何结合jQuery库（如`jquery-1.2.6.js`）和第三方插件（如`jquery.hotkeys.js`）来增强键盘控制的功能。 一、原生JavaScript键盘事件 1. `...
全面，直观javascript的事件
### 知识点详解：JS捕获后台事件 #### 一、概述 在现代Web开发中，JavaScript（简称JS）是实现网页动态交互的核心技术之一。通过JavaScript，开发者可以为网站添加各种各样的功能和效果，提升用户体验。本文将重点...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
"simplecalendar.js"是一款轻量级、易用且功能丰富的JavaScript日历插件，专为开发者设计，用于快速集成到各种Web应用中，实现事件记录与展示的功能。本文将深入探讨其核心特点、使用方法以及如何自定义和扩展。 一...
本篇文章将深入探讨“事件发布/订阅模式”，并结合提供的`eventjs`模块进行详细讲解。 事件发布/订阅模式（也称为发布/订阅者模式或观察者模式）是一种设计模式，它允许对象之间的解耦。在这种模式中，我们有三个...
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事件（源...
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]