使用jQuery在javascript中自定义事件

  js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦。jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的各种传递。

  例如,我要点击一个button,现在要将这个点击事件抛出来,从其他任何想要的地方去接收;

这个是button

<button name="btn" onclick="clickbtn()">按钮</button>

js:

1 var btn=$("button");
2 btn.bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);});;
3 function clickbtn(){
4     btn.trigger("evtClick",["value1","value2"]);
5 }

第一行,通过jQuery获得这个dom元素对象
第二行,添加一个事件监听evtClick,并对其实现处理方法

第三行,在clickbtn中添加事件触发,事件的名字叫做“evtClick”,并且传递一个数组存放所有的传递的参数,第二行,事件处理部分就按照这个传递的规则实现

几行代码就实现了事件抛出机制。当然,这样写或许再少一行代码:

1 $("button");.bind("evtClick",function(evt,v1,v2){alert("success:"+v1+v2);});;
2 function clickbtn(){
3     $("button");.trigger("evtClick",["value1","value2"]);
4 }

  

时间: 2024-10-24 18:41:26

使用jQuery在javascript中自定义事件的相关文章

javascript中自定义事件

自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function EventTarget(){ this.handlers={}; } EventTarget.prototype={ constructor:EventTarget, addHandler:function(type,handler){ if(typeof this.handlers[type]=

jQuery文本框中的事件应用

jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquer

详解javascript实现自定义事件

这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序 1.js所支持的浏览器默认事件 浏览器特定行为的事件,或者叫系统事件,js默

javascript中的事件

在javascript中的事件有三个方面的知识,一是事件流,二是事件处理程序,三是事件对象.下面就我个人的一点理解,分别讲述一下这三个方面的内容. 第一.事件流 事件流指的是事件按照一定的顺序触发.它有两个顺序,分别是自上而下和自下而上. 自上而下的叫做事件捕获,事件捕获指的是事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递.在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useC

PB中自定义事件ID含义

PB中自定义事件ID含义 单选或多选按钮消息(前缀:pbm_bm) pbm_bmgetcheck 单选按钮或多选按钮是否被选. pbm_bmgetstate 按钮是否加亮. pbm_bmsetcheck 将无线按钮或确认框的选中状态改为未选中状态,反之亦然. pbm_bmsetstate 加亮或不加亮按钮. pbm_bmchange 改变按钮的风格,例如,改为单选按钮或组合框. 单选或多选按钮通知消息(前缀:pbm_bn) pbm_bnclicked 按钮控件被点中. pbm_bndisable

javaScript中的事件三

javaScript中的事件三 先看两种错误的写法,他们的目的都是:添加两个事件: 错误方式一: window.onload=function (){ alert('event 1'); } window.onload=function (){ alert('event 2') } 错误方式二: window.onload=function (){ var obj=document.getElementById("but"); obj.onclick=function(){ alert

javascript中奇怪事件

javascript中奇怪事件 为啥叫奇怪事件了,应该是我目前掌握的知识暂时不能解释这种现象滴呀(也许可以用事件流的概念来解释滴呀) 看布局: #hideInfo{ height:100px; width:100px; background:green; position:absolute; top:20px; left:-90px; } #hideInfo span{ height:100px; width:100px; background:blue; position:absolute;

了解javascript中的事件(一)

零.寒暄 由于刚入职,近期事情繁多,今天好不容易中期答辩完事,晚上有一些时间,来给大家分享一篇博文. 这段时间每天写js接触事件比较多,自己会使用,但是用的时候比较混乱,现在系统的整理下,好了,闲话不多说,谈正事! 一.事件概念 什么是事件?说白了,事件是文档或浏览器中发生的特定交互瞬间!比如鼠标点击,滑过等等. 二.事件流 事件流就是描述了页面中接受事件的顺序.在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义.

jquery的AJAX中各个事件执行顺序

jquery的AJAX中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.error 7.ajaxError (全局事件) 8.complete 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件)