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

最新推荐文章于 2021-04-25 14:51:19 发布
最新推荐文章于 2021-04-25 14:51:19 发布
阅读量6.7k 收藏 4
点赞数
分类专栏： jQuery源码学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wujimiao/article/details/78145924
版权

国庆节来了，心情不错，但学习还得继续，今天特意对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淼
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 事件绑定on()的用法，以及对于其他绑定事件的比较
vivian_wang07的博客
05-12 1万+
一： 函数绑定
原生JS实现Jquery的on方法 事件绑定addEventListener的简化写法
lionking1990的博客
10-30 1024
//为元素添加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 为元素添加on方法
高先生的猫
04-20 638
ement.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {、 []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; };
JS实现jQuery的attr()与on()方法
weixin_45393020的博客
04-25 1431
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
jQuery on()方法
weixin_30765577的博客
02-12 439
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
jQuery方法原生实现---each遍历
wujimiao的专栏
09-26 759
最近有点浮躁，总想着快速前端进阶，成为高手。奈何现实残酷，故此用原生js实现下jQuery一些函数，用于练手。 each遍历类数组，数组挺好用的。网上也有很多教程，原理无非是利用call，apply改变this指针指向，指向谁呢？嗯，js数组！ 原生数组有着很多方法能够读取数组元素，例如新增加every()方法遍历数组,IE9以上支持该方法 function each(object,
JavaScript案例-原生ajax
02-16
"JavaScript案例-原生ajax"这个主题聚焦于如何不依赖任何库或框架，仅用JavaScript原生API实现Ajax通信。 Ajax的核心在于XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下发送HTTP请求并接收响应。以下是...
详解用原生JavaScript实现jQuery的某些简单功能
10-20
然而，理解如何用原生JavaScript实现jQuery的功能对于提升开发者的技术水平和优化代码性能非常有益。本文将深入探讨如何使用纯JavaScript实现jQuery的一些基础功能。 首先，我们需要创建一个类似于jQuery的对象，...
jquery-3.5.1.zip
12-08
在实际项目中，解压“jquery-3.5.1.zip”后，我们会得到一个包含jQuery库文件（如jquery-3.5.1.js或minified的jquery-3.5.1.min.js）的文件夹。将这个文件引入到HTML中，就可以立即享受到jQuery带来的便利。当然，...
jquery-3.1.1和jquery-min-3.1.1打包
02-24
- **更好的浏览器兼容性**：虽然现代浏览器支持了很多原生的JavaScript特性，但jQuery 3.1.1仍保持对老式浏览器的兼容，如IE8及以上版本。 - **性能优化**：在3.1.1版本中，jQuery对一些常用函数进行了性能优化，如...
详解原生JavaScript实现jQuery中AJAX处理的方法
10-22
这篇文章的目的就是揭示jQuery中的AJAX处理方式如何转化为原生JavaScript API的实现。 首先，AJAX（Asynchronous JavaScript and XML）是一种允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页...
原生js实现on与off 方法
永恒的避风港
03-26 2524
使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。 实现方式 以下为个人类库jTool 中 Event 实现方式。 代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。 一个空壳子 首先通过一个空架子来了解下实...
jQuery.on() 函数详解
weixin_44108880的博客
05-12 1820
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。 此外，该函数可以为同一元素、同一事件类型绑定多个事
jQuery on()方法实现原理（事件委托）
pony的博客
01-14 4684
html> html lang="en"> head> meta charset="UTF-8"> title>jQuery on()方法实现原理（事件委托）title> style> #list li{ margin: 20px; width: 200px; height: 50px;
JQ如何获取原生的event对象
xyphf的博客
10-05 3450
举例说明：$(function(){ $('#div1').on('touchstart',function(ev){ alert(ev.changedTouches); }); });此时弹出的是undefined，没有获取到； 这时我们要转成原生的event对象$(function(){ $('#div1').on('touchsta
关于原生事件绑定和jquery的On
Luffy_ying的博客
10-28 417
先简单说明下addEventListener这个函数，代码如下：1.window.onload = function(){ var a = document.getElementById("a"); a.addEventListener("click",function(){ console.log("a1"); }) a.add
html原生onload方法执行在jq的.on方法之前哦！
编程路
02-18 638
刚刚将jq的.load换为.on('load', 想起来还有个原生的onload事件，手痒测试了一下，有收获哦！$(function () { document.getElementById('imgx').onload=function(){ // 加载完成 // alert('load ok'); $('#imgwh').text ('loa...
jQueryy原生js实现---hover事件
热门推荐
wujimiao的专栏
10-03 1万+
jQuery常用鼠标事件之一，hover事件。相信大家对它很熟悉，对其原理也很熟悉。通常就是鼠标经过，鼠标离开事件的集合。我为了更好理解jQuery插件库，所以找一些常用方法用js实现，增强对js的理解。 根据上面分析，核心事件就是onmouseover和onmouseout。那么我们就看一下初步效果吧！ 3 4 1 2 //j
jquery原生 实现可拖拽放大缩小的弹出框
最新发布
12-08
使用jQuery原生可以很容易实现可拖拽放大缩小的弹出框。首先，需要引入jQuery库，在HTML中创建弹出框的结构，并设置好初始样式。然后使用jQuery的事件绑定方法，为弹出框的标题栏添加鼠标按下事件，实现拖拽功能。接着，为弹出框的放大缩小按钮添加点击事件，通过改变弹出框的宽高和位置实现放大缩小效果。具体实现步骤如下： 1. 引入jQuery库： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 创建弹出框结构： ```html <div class="popup"> <div class="popup-title">弹出框标题</div> <div class="popup-content"> <!-- 弹出框内容 --> </div> <div class="popup-controls"> <button class="btn-zoom-in">放大</button> <button class="btn-zoom-out">缩小</button> </div> </div> ``` 3. 设置初始样式： ```css .popup { position: absolute; top: 50px; left: 50px; width: 200px; height: 150px; border: 1px solid #000; background-color: #fff; } .popup-title { cursor: move; } ``` 4. 实现拖拽功能： ```javascript $('.popup-title').on('mousedown', function(e) { var offsetX = e.clientX - $(this).offset().left; var offsetY = e.clientY - $(this).offset().top; $(document).on('mousemove', function(e) { $('.popup').offset({ top: e.clientY - offsetY, left: e.clientX - offsetX }); }); $(document).on('mouseup', function() { $(document).off('mousemove'); $(document).off('mouseup'); }); }); ``` 5. 实现放大缩小功能： ```javascript $('.btn-zoom-in').on('click', function() { var width = $('.popup').width(); var height = $('.popup').height(); $('.popup').css({ width: width * 1.2, height: height * 1.2 }); }); $('.btn-zoom-out').on('click', function() { var width = $('.popup').width(); var height = $('.popup').height(); $('.popup').css({ width: width * 0.8, height: height * 0.8 }); }); ``` 通过以上步骤，就可以实现一个带拖拽、放大和缩小功能的弹出框。当用户鼠标点击弹出框标题栏后，即可拖动整个弹出框；点击放大缩小按钮后，即可实现弹出框的放大和缩小效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值