


Sharing examples of javascript imitating jquery's trigger to trigger mouse events
During the project process, it will be used that the user triggers an event. It is necessary to trigger the corresponding event on another element and then execute the corresponding code. This can be achieved through trigger in jquery
trigger API
I thought about it today, if there is no jq, how can it be implemented using js? I recently read the book "Advanced Programming with JavaScript" for the second time and gained some new insights.
If the click event is triggered, the first impression must be that element.click(); is enough. Then can triggering dbclick, mouseleave, focus, mouseenter and other events also be directly element.mouseleave()?
So I executed it and found that an error was reported! That's right, it's not just a matter of adding element.eventType() so that the corresponding event can be triggered directly.
#So naturally I thought of the methods createEvent initEvent dispatchEvent.
// 创建一个事件对象,就好像你绑定事件回调函数里获得的那个事件对象一样var myEvent = document.createEvent('Event') // 初始化这个事件对象,为它提高需要的“特性”myEvent.initEvent('myEventName', true, true) // 按照常见的方式绑定对该事件的监听,这里的 element 可以是任何一个元素,你懂的element.addEventListener('myEventName', function(evt) { // 这里,evt 就是你创建的事件对象了,不过它会更丰富一些——这些是浏览器为你做的})// 然后这样触发它element.dispatchEvent(myEvent)
Directly upload the code: (I tried it and it is not compatible with
<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8" /> <title>原生javascript防jquery的trigger触发鼠标事件</title> <meta name="author" content="" /> <style> .p{height:40px;width:100px;background:#ccc;} </style></head><body> <h2 id="我是H">我是H2</h2> <p class="p">点击p</p></body></html><script> var h2 = document.querySelector("h2"); var p = document.querySelector(".p"); h2.onclick = function(event){ var ev = event || window.event; console.log(ev.type); } h2.ondbclick = function(event){ var ev = event || window.event; console.log(ev.type); } h2.onmouseenter = function(event){ var ev = event || window.event; console.log(ev.type); } h2.onmouseleave = function(event){ var ev = event || window.event; console.log(ev.type); } h2.onfocus = function(event){ var ev = event || window.event; console.log(ev.type); } h2.onblur = function(event){ var ev = event || window.event; console.log(ev.type); } //触发事件方法 function trigger(elem, event){ var myEvent = document.createEvent('Event') // 初始化这个事件对象,为它提高需要的“特性” myEvent.initEvent(event, true, true); //执行事件 elem.dispatchEvent(myEvent); } p.onclick = function(){ trigger(h2, "click"); //触发click事件 trigger(h2, "dbclick"); //触发dbclick事件 trigger(h2, "mouseenter"); //触发mouseenter事件 trigger(h2, "mouseleave"); //触发mouseleave事件 trigger(h2, "blur"); //触发blur事件 trigger(h2, "focus"); //触发focus事件 }</script>
The result is as follows:
(I tried it and it is not compatible
The above is the detailed content of Sharing examples of javascript imitating jquery's trigger to trigger mouse events. For more information, please follow other related articles on the PHP Chinese website!

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

SublimeText3 Chinese version
Chinese version, very easy to use

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Notepad++7.3.1
Easy-to-use and free code editor