jQuery的原生js实现---on方法

最新推荐文章于 2022-03-15 16:48:36 发布
最新推荐文章于 2022-03-15 16:48:36 发布
阅读量6.7k 收藏 4
点赞数
分类专栏： jQuery源码学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wujimiao/article/details/78145924
版权
本文是关于jQuery中on方法的使用及如何用原生JavaScript实现事件绑定的笔记。在确保兼容性的同时，探讨了如何针对IE浏览器手动获取DOM元素并绑定事件。
摘要由CSDN通过智能技术生成

国庆节来了，心情不错，但学习还得继续，今天特意对jQuery的on事件绑定做一个笔记。

<div class="aon">
        <sapn class="aspan">1</sapn>
        <sapn class="aspan">2</sapn>
    </div>
    <div class="aon">
        <sapn class="aspan">3</sapn>
        <sapn class="aspan">4</sapn>
    </div>
    <div class="aon">
        <sapn class="aspan">5</sapn>
        <sapn class="aspan">6</sapn>
    </div>
    <div class="aon">
        <sapn class="aspan">7</sapn>
        <sapn class="aspan">8</sapn>
    </div>


//原生js简
最低0.47元/天 解锁文章
miao淼
关注
专栏目录
jQueryy原生js实现---hover事件
wujimiao的专栏
10-03 1万+
jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。 根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！ 3 4 1 2 //j
原生JS实现Jquery的on方法 事件绑定addEventListener的简化写法
lionking1990的博客
10-30 1035
//为元素添加on方法 Object.prototype.on = Window.prototype.on = HTMLDocument.prototype.on = Element.prototype.addEventListener || Element.prototype.attachEven; //注解 这是最简单的一种写法，也是最有效的。告诉浏览器el.on就是Element.prototype.addEventListener或者Element.prototype.attachEve...
JS实现jQuery的attr()与on()方法
weixin_45393020的博客
04-25 1465
JS实现jQuery的attr()、on()方法 这里用原生JS实现的attr()、on()方法，与jQuery里的attr()、on()方法一样能够进行链式调用。 回顾jQuery中的attr()与on()方法 attr() 设置或返回相应元素的属性值，与原生JS中的setAttribute()方法相似 on() 在被选元素上添加事件及其事件行为（此方法在jQuery1.7后逐渐代替bind()、live() 和 delegate() 方法） 原生JS实现attr()方法 利用setAttribute
原生js 为元素添加on方法
高先生的猫
04-20 652
ement.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {、 []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; };
模拟实现jQuery的$().on()和$().trigger()
weixin_34185560的博客
06-19 497
前言：仅仅是简单模拟了$().on()和$().trigger()，仅支持id选择器，事件冒泡与事件委托。 代码： <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>模拟jQuery的事件绑定到触发过程</title></head...
JS - jquery中 on 的几种用法
qq_37131747的博客
03-15 320
Js - jquery中 on 的几种用法
详解用原生JavaScript实现jQuery的某些简单功能
10-20
然而，理解如何用原生JavaScript实现jQuery的功能对于提升开发者的技术水平和优化代码性能非常有益。本文将深入探讨如何使用纯JavaScript实现jQuery的一些基础功能。 首先，我们需要创建一个类似于jQuery的对象，...
jquery-bootstrap-dropdown-on-hover:向 Bootstrap 下拉菜单添加悬停功能
06-02
script src =" dist/bootstrap-dropdown-on-hover.min.js " > </ script > < script > jQuery ( function ( $ ) { $ ( "#menu" ) . bootstrapDropdownOnHover ( ) ; } ) ; </ script > &lt...
原生JS取代一些JQuery方法的简单实现
10-21
然而，随着原生JavaScript功能的不断强大，许多jQuery提供的方法都可以用纯JavaScript实现，而且性能上往往更优。本文将详细介绍如何用原生JavaScript替代一些常用的JQuery方法。 1. 选取元素 在jQuery中，选取元素...
原生javascript实现类似jquery on方法的行为监听
weixin_34395205的博客
02-28 235
原生javascript有addEventListener和attachEvent方法来注册事件，但有时候我们需要判断某一行为甚至某一函数是否被执行了，并且能够获取前一行为的参数，这个时候就需要其他方法来实现了。 项目中的原始场景是有若干个tab切换，tab组件当然是已经写好的，现在需要每次点击后保存localstorage等其他操作，需要监听tab是否被点击。下面是简单的实现事件监听方法： ...
JavaScript事件
weixin_30951743的博客
08-28 79
1、一般事件: onClick -- 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick -- 鼠标双击事件 onMouseDown -- 鼠标上的按钮被按下了 onMouseUp -- 鼠标按下后，松开时激发的事件 onMouseOver -- 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove -- 鼠标移动时触发的事件 onMouseO...
jQuery on()方法实现原理（事件委托）
pony的博客
01-14 4729
html> html lang="en"> head> meta charset="UTF-8"> title>jQuery on()方法实现原理（事件委托）title> style> #list li{ margin: 20px; width: 200px; height: 50px;
关于原生事件绑定和jquery的On
Luffy_ying的博客
10-28 430
先简单说明下addEventListener这个函数，代码如下：1.window.onload = function(){ var a = document.getElementById("a"); a.addEventListener("click",function(){ console.log("a1"); }) a.add
js 事件绑定on()的用法，以及对于其他绑定事件的比较
热门推荐
vivian_wang07的博客
05-12 1万+
一： 函数绑定
jQuery on()方法
weixin_30765577的博客
02-12 453
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
原生js实现on与off 方法
永恒的避风港
03-26 2569
使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。 实现方式 以下为个人类库jTool 中 Event 实现方式。 代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。 一个空壳子 首先通过一个空架子来了解下实...
【JavaScript】事件
Superman_H的博客
08-19 429
# 事件的使用 ## 绑定事件 1. DOM0 写法：`dom.on事件类型 = listener` 2. DOM2 写法：`dom.addEventListener('事件类型', listener, 配置对象)` `listener` 可以被指定为一个回调函数 / 对象（其 `handleEvent()` 方法用作回调函数）。 例如，一个可同时处理 `fullscreenchange` 和 `fullscreenerror` 事件的函数如下： ```js function e
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
orange0111的博客
11-13 3769
本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思） 高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子 有三个同事预计会在周一收到快递。为签收快递，有两种办法
jQuery与原生JS实现轮播图淡入淡出效果教程
本文主要探讨了如何使用原生JavaScript和jQuery相结合的方式实现一种具有淡入淡出效果的轮播功能。首先，我们理解基础原理：通过将多张图片设置在同一个绝对定位区域内，并初始透明度设为0，利用jQuery的动画功能来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值