Home Web Front-end JS Tutorial Own js tool Event packaging_javascript skills

Own js tool Event packaging_javascript skills

May 16, 2016 pm 06:47 PM
event encapsulation

Because the events of IE are global and the events of Firefox are local, it is not convenient to use. At this time, we have to assemble the commonly used event operations ourselves and encapsulate them into classes for easy reuse

Copy code The code is as follows:

/**
Class Event
Usage:
Event.getEvent(); Get the event of ie, firefox
Event.getTarget(); Get the srcElement of ie or the target of firefox
Event.isIe() ;Whether it is ie
Event.clientX(); Get the mouse x coordinate of ie,fox
Event.clientY(); Get the mouse y coordinate of ie,fox
*/
var Event=new function(){
this.toString=function(){
return this.getEvent();
}
//Get the event
this.getEvent=function(){
var ev=window.event;
if(!ev){
var c=this.getEvent.caller;
while(c){
ev=c.arguments[0];
if(ev && Event = =ev.constructor)
break;
c=c.caller;
}
}
return ev;
};
//Get event source
this .getTarget=function(){
var ev=this.getEvent();
return this.isIe()?ev.srcElement:ev.target;
}
//Is it ie
this.isIe=function(){
return document.all?true:false;
}
//Mouse x coordinate
this.clientX=function(){
var ev =this.getEvent();
var x=this.isIe()?ev.clientX:ev.pageX;
return x;
}
//Mouse y coordinate
this. clientY=function(){
var ev=this.getEvent();
var y=this.isIe()?ev.clientY:ev.pageY;
return y;
}
/**Add event (object, event type, function pointer)
obj: html object
sEvent: event name
spNotify: event execution method
isCapture: whether to allow full screen capture
*/
this.addEvent=function(obj,sEvent,fpNotify,isCapture){
sEvent=sEvent.indexOf("on")!=-1?sEvent:"on" sEvent;
if(obj.addEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on") 2);
obj.addEventListener(sEvent,fpNotify,isCapture);
} else{ //ie
if(isCapture)
obj.setCapture(isCapture);
obj.attachEvent(sEvent,fpNotify);
}
}
//Remove event
this.removeEvent=function(obj,sEvent,fpNotify){
if(obj.removeEventListener){
sEvent=sEvent.substring(sEvent.indexOf("on") 2)
obj. removeEventListener(sEvent,fpNotify,false);
}else{
obj.detachEvent(sEvent,fpNotify);
}
}
//Get the mouse button, left=1, middle= 2,right=3
this.button=function(){
var ev=this.getEvent();
if(!ev.which&&ev.button){//ie
return ev. button&1?1:(ev.button&2?3:(ev.button&4?2:0))
}
return ev.which;
};
//Prevent event bubbling delivery
this.stopPropagation=function(){
var ev=this.getEvent();
if(this.isIe)
ev.cancelBubble=true;
else
ev.stopPropagation( );
}
//Prevent the default event from returning
this.preventDefault=function(){
var ev=this.getEvent();
if(this.isIe)
ev.returnValue=false;
else
ev.preventDefault();
}
}
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1253
24
TrendForce: Nvidia's Blackwell platform products drive TSMC's CoWoS production capacity to increase by 150% this year TrendForce: Nvidia's Blackwell platform products drive TSMC's CoWoS production capacity to increase by 150% this year Apr 17, 2024 pm 08:00 PM

According to news from this site on April 17, TrendForce recently released a report, believing that demand for Nvidia's new Blackwell platform products is bullish, and is expected to drive TSMC's total CoWoS packaging production capacity to increase by more than 150% in 2024. NVIDIA Blackwell's new platform products include B-series GPUs and GB200 accelerator cards integrating NVIDIA's own GraceArm CPU. TrendForce confirms that the supply chain is currently very optimistic about GB200. It is estimated that shipments in 2025 are expected to exceed one million units, accounting for 40-50% of Nvidia's high-end GPUs. Nvidia plans to deliver products such as GB200 and B100 in the second half of the year, but upstream wafer packaging must further adopt more complex products.

AMD 'Strix Halo” FP11 package size exposed: equivalent to Intel LGA1700, 60% larger than Phoenix AMD 'Strix Halo” FP11 package size exposed: equivalent to Intel LGA1700, 60% larger than Phoenix Jul 18, 2024 am 02:04 AM

This website reported on July 9 that the AMD Zen5 architecture "Strix" series processors will have two packaging solutions. The smaller StrixPoint will use the FP8 package, while the StrixHalo will use the FP11 package. Source: videocardz source @Olrak29_ The latest revelation is that StrixHalo’s FP11 package size is 37.5mm*45mm (1687 square millimeters), which is the same as the LGA-1700 package size of Intel’s AlderLake and RaptorLake CPUs. AMD’s latest Phoenix APU uses an FP8 packaging solution with a size of 25*40mm, which means that StrixHalo’s F

How do C++ functions improve the efficiency of GUI development by encapsulating code? How do C++ functions improve the efficiency of GUI development by encapsulating code? Apr 25, 2024 pm 12:27 PM

By encapsulating code, C++ functions can improve GUI development efficiency: Code encapsulation: Functions group code into independent units, making the code easier to understand and maintain. Reusability: Functions create common functionality that can be reused across applications, reducing duplication and errors. Concise code: Encapsulated code makes the main logic concise and easy to read and debug.

Event processing library in PHP8.0: Event Event processing library in PHP8.0: Event May 14, 2023 pm 05:40 PM

Event processing library in PHP8.0: Event With the continuous development of the Internet, PHP, as a popular back-end programming language, is widely used in the development of various Web applications. In this process, the event-driven mechanism has become a very important part. The event processing library Event in PHP8.0 will provide us with a more efficient and flexible event processing method. What is event handling? Event handling is a very important concept in the development of web applications. Events can be any kind of user row

Packaging technology and application in PHP Packaging technology and application in PHP Oct 12, 2023 pm 01:43 PM

Encapsulation technology and application encapsulation in PHP is an important concept in object-oriented programming. It refers to encapsulating data and operations on data together in order to provide a unified access interface to external programs. In PHP, encapsulation can be achieved through access control modifiers and class definitions. This article will introduce encapsulation technology in PHP and its application scenarios, and provide some specific code examples. 1. Encapsulated access control modifiers In PHP, encapsulation is mainly achieved through access control modifiers. PHP provides three access control modifiers,

Introduction to Axios encapsulation and common methods in Vue Introduction to Axios encapsulation and common methods in Vue Jun 09, 2023 pm 04:13 PM

Introduction to Axios encapsulation and common methods in Vue Axios is an HTTP library based on Promise. Its advantage is that it has good readability, ease of use and scalability. As a popular front-end framework, Vue also provides full support for Axios. This article will introduce how to encapsulate Axios in Vue, and introduce some commonly used methods of Axios. 1. Axios encapsulation During the development process, we often need to perform some customized encapsulation of Axios, such as

How to resolve poor scalability error in Python code? How to resolve poor scalability error in Python code? Jun 25, 2023 am 09:51 AM

As a high-level programming language, Python is widely used in data analysis, machine learning, web development and other fields. However, as the size of the code continues to expand, the scalability problem of Python programs gradually becomes apparent. Poor scalability error means that the Python program cannot adapt well to changes in requirements under certain circumstances and cannot process large-scale data, resulting in poor program performance. Too many dependencies, poor code structure, lack of documentation, etc. are all culprits of poor scalability errors in Python programs.

Foxconn builds AI one-stop service, and invested Sharp to enter advanced semiconductor packaging: put into production in 2026, designed to produce 20,000 wafers per month Foxconn builds AI one-stop service, and invested Sharp to enter advanced semiconductor packaging: put into production in 2026, designed to produce 20,000 wafers per month Jul 18, 2024 pm 02:17 PM

According to news from this site on July 11, the Economic Daily reported today (July 11) that Foxconn Group has entered the advanced packaging field, focusing on the current mainstream panel-level fan-out packaging (FOPLP) semiconductor solution. 1. Following its subsidiary Innolux, Sharp, invested by Foxconn Group, also announced its entry into Japan's panel-level fan-out packaging field and is expected to be put into production in 2026. Foxconn Group itself has sufficient influence in the AI ​​field, and by making up for its shortcomings in advanced packaging, it can provide "one-stop" services to facilitate the acceptance of more AI product orders in the future. According to public information consulted on this site, Foxconn Group currently holds 10.5% of Sharp's shares. The group stated that it will not increase or reduce its holdings at this stage and will maintain its holdings.

See all articles