创建自定义事件

为什么要自定义事件,自定义事件要使用在地方?

传统的事件不能满足我们的需求,所以我们需要自定义事件,比如传统的事件有单击,双击,但是突然某一天我想要三击 那就要用到自定义事件了,自定义事件一般使用在观察者模式上,比如主体需要发布各种消息通过创建各种自定义事件来实现,对于消息的订阅则通过注册监听器来实现。

var test = document.getElementById("longen");
 // 创建事件
var evt = document.createEvent(‘Event‘);
// 定义事件类型
evt.initEvent(‘customEvent‘,true,true);
// 监听事件
test.addEventListener(‘customEvent‘,function(){
     console.log("111");

},false);
// 触发事件
test.dispatchEvent(evt);

在这个过程中,createEvent方法创建了一个空事件evt,然后使用initEvent方法定义事件的类型为约定好的自定义事件,再对元素进行监听,最后使用dispatchEvent来触发事件了。自定义事件无非就是监听事件,然后自己运行回调函数,上面的initEvent的第二个参数的意思是:是否冒泡,第三个参数的意思是:是否可以使用preventDefault()来阻止默认行为。

时间: 2024-11-05 18:37:33

创建自定义事件的相关文章

js高级技巧----自定义事件

自定义事件 原本的事件处理的原理:事件是javascript与浏览器交互的主要途径. 事件是一种叫做观察者的设计模式 观察者模式由两类对象组成:主体和观察者. 主体用于发布事件: 观察者通过订阅这些事件来观察该主体. 自定义事件的原理: 将事件处理程序保存在一个数组中: 当添加事件的时候,我们push进去这个事件处理函数: 当我们执行的时候,从头遍历这个数组中的每个事件处理函数,并执行. 自定义事件应该具有的内容: 1.一个handler对象,对象中保存着存放事件处理函数的数组 handler 

移动端自定义事件

移动端的事件类型和PC端的不同,有touchstart,touchmove,touchend... 今天,用了touchstart和touchend封装了一个左右上下滑动的触发事件(这里的封装就用到了订阅者发布模式) 步骤:一.创建事件(document.createEvent("customEvent"))    二.初始化事件 (event.initCustomEvent("事件名称",true,true,{key:value})) 第二.第三个参数表示是否冒泡

CustomEvent自定义事件

javascript与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.通常大家都会认为事件是在用户与浏览器进行交互的时候触发的,其实通过javascript我们可以在任何时刻触发特定的事件,并且这些事件与浏览器创建的事件是相同的. 通过createEvent方法,我们可以创建新的Event对象,这个方法接受一个参数eventType,即想获取的Event对象的事件模板名,其值可以为HTMLEvents.MouseEvents.UIEvents以及Cust

Angular4.x Event (DOM事件和自定义事件)

Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡. DOM事件冒泡与Angular可以无缝工作,具体示例如下: im

原生js之document.createEvent建立自定义事件

document.createEvent用于创建事件, 在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件类型.DOM Level 3增加很多事件类型,个人觉得其中最有用的是CustomEvent自定义事件. 为DOM元素创建自定义事件的步骤为: 一.创建事件:var ev = document.createEvent('CustomEvent'); 二.初始化事件:ev.initCustomEvent('自定义事件名称', false(是否

创建自定义的事件接收器-Semantic Logging

创建自定义的事件接收器 Semantic Logging Application Block提供了大量的事件接收器,如Rolling Flat File,SQL Database, 云存储接收器等.这些接收器都实现了IObservable<EventEntry>接口. 有时这些并不能很好的满足客户需求,这时就需要定制事件接收器,比如邮件接收器.短信接收器等. 下面介绍以下如何定制邮件接收器,在特定的事件发生时自动发送邮件给指定的客户. 本文介绍了以下主题: 创建自定义接收器 在进程内使用自定义

js原生创建模拟事件和自定义事件的方法

让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 1. 模拟鼠标事件 MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().我们使用如下页面做测试 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-CN"> 4

javascript和jquey的自定义事件小结

“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用对象B的某个方法,实现交互:直接方法调用本质上也是属于一种特殊的发送与接受消息,它把发送消息和接收消息合并为一个动作完成: 方法调用方和被调用方被紧密耦合在一起:因为发送消息和接收消息是在一个动作内完成,所以无法做到消息的异步发送和接收: 2)对象A生成消息->将消息通知给一个事件消息处理器(Obs

PB中自定义事件ID含义

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