文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

在元素上写事件和addEventListener()的区别

大家好，又见面了，我是你们的朋友全栈君。 在元素上写事件和addEventListener()的区别 onclick添加事件不能绑定多个事件，后面绑定的会覆盖前面的。...addEventListener方式，不支持低版本的IE。（attachEvent 支持IE）。 普通方式绑定事件后，不可以取消。...addEventListener 是W3C DOM 规范中提供的注册事件监听器的方法。...: 事件类型字符串，不使用“on”前缀 – – callback：事件处理程序（回调函数） – – useCapture：可选参数，是否使用事件捕获的方式处理事件。...不传递时，默认为false，表示不使用事件捕获（使用事件冒泡），如果需要显示事件捕获，则显示传递true。

2K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    移动端前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分 swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发...swipeRight swipeUp swipeDown longTap singleTap doubleTap', false); 点一下，如图为相关事件触发的顺序，可以看到click事件在touchend...第三方插件监听 1) 使用jquery 　　为了查看三个属性的区别，简单地只监听一个事件 jquery.js"> $('.one, .two, #test'...由此可知: touches记录的是屏幕上全部的触摸对象的信息 targetTouches记录的是当前DOM节点上全部的触摸对象的信息 changedTouches记录着触发该次事件的信息，一般长度为1

    3.1K20

    从零开始学 Web 之 移动Web（三）Zepto

    Zepto 主要使用在移动端浏览器上面，由于移动端的浏览器都是比较新的平台，而 jQuery 主要是在 PC 上为了浏览器的兼容性而使用的，所以在移动端一般不使用 jQuery，因为它的兼容性失去了意义...当一个元素被按住超过750ms触发。 swipe：滑动屏幕时触发。 swipeLeft, swipeRight, swipeUp, swipeDown：屏幕左滑，右滑，上滑，下滑时触发。...三、Zepto 模块化 Zepto 有一点和 jQuery 是不同的，就是 Zepto 是分模块的。在使用的时候不是像 jQuery 只需要引入一个 js 文件就可以了。Zepto 是分模块的。...touch.js 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...gesture.js 在触摸设备上触发 pinch 手势事件。

    1.7K20

    10-移动端开发教程-移动端事件

    2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...2.2 touchstart事件 ​ 当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。 div> 点击我！...(e) { console.log('touchstart'); }); 2.3 touchmove事件 当用户在触摸屏上移动触点(手指)的时候，触发这个事件...swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipeRight：手指在屏幕上向右滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 swipeDown...：手指在屏幕上向下滑动时会触发 5.3 zepto的手势相关事件 Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用

    8.1K80

    10-移动端开发教程-移动端事件

    2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...2.2 touchstart事件 ​ 当用户手指触摸到的触摸屏的时候触发。事件对象的 target 就是touch 发生位置的那个元素。 div> 点击我！...(e) { console.log('touchstart'); }); 2.3 touchmove事件 当用户在触摸屏上移动触点(手指)的时候，触发这个事件...swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 swipeRight：手指在屏幕上向右滑动时会触发 swipeUp：手指在屏幕上向上滑动时会触发 swipeDown...5.3 zepto的手势相关事件 Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用，Zepto.js就怎么用。

    7.5K70

    jquery.touchSwipe.min.js 的简单用法

    要做一个手机端h5的DEMO。其中一个效果不能用点击来实现，要求必须使用触摸滑动切换来实现。对于zepot.js来说，我不是很熟悉，其功能也远远没有jQuery来得强大。因此，决定使用jq实现。...问题是，jq是没有这个事件的。于是，百度之。找到jquery.touchSwipe.min.js这个插件。 官方文档全部中文，实在看不懂。看示例吧，也没看懂。...简单把代码列在这里： $(window).swipe({ swipeLeft:function(){ // 向左滑动执行 }, swipeRight:function.../touchSwipe/demos/Basic_swipe.html （非常慢） 如果上天给我再来一次的机会，我一定好好学习英语~ 补充 如果某个盒子加了滑动效果，而其中某个或者多个子元素不需要这个滑动效果怎么做呢...另外，还有一种方法，就是直接给不需要滑动的元素加上.noSwipe 这个样式名即可。

    1.3K20

    jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型。 　　1.touch 事件。 　　　　tap 快速触摸屏幕并且离开，类似一种完整的点击操作。 　　　　...swipe 在1秒内水平移动30px屏幕像素上时触发。 　　　　swipeleft 向左侧滑动 　　　　swiperight 像右侧滑动。 　　...2.方向改变事件 　　　　orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数， 　　　　该参数有两种返回值：portrait...　　　　　　 data:$("form#search").serizlize(); 　　　　 }) 数据存储： 　　1.jqmData()方法; 　　　　可以在元素上绑定任意数据...，指定需要移除哪个data属性，如果不穿参数，则需要移除元素上的所有数据。

    1.8K100

    Python全栈之jQuery笔记

    $("div").find("*"); 返回 div> 的所有后代 3.jQuery遍历-同胞(siblings) 同胞拥有相同的父元素.通过jQuery,您能够在DOM树中遍历元素的同胞元素...主动触发事件: 可使用jquery对象上的trigger方法来触发对象上绑定的事件....; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....1.tap 元素tap的时候触发,此事件类似click,但是比click快. 2.longTap 当一个元素被按住超过750ms触发. 3.swipe, swipeLeft,

    6.6K40

    jQuery中常用的函数方法总结

    起到事件监听的作用。...如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。...css(name,value) 代码： $("p").css("color","red"); 作用：很简单，就是在匹配的元素中，设置一个样式属性的值。...前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。 wrap(html) HTML 代码: Test Paragraph....div> 作用：把所有匹配的元素用其他元素的结构化标记包裹起来。 这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

    2.5K40

    jQuery源码解析之clone()

    ： 生成被选元素的副本，包含子节点、文本和属性 注意：('div').clone(true) 表示克隆目标节点的事件和数据('div').clone(true,true) 表示克隆目标节点及其子节点的事件和数据...，需要注意的就是参数deepDataAndEvents不填的话，其值是根据参数dataAndEvents的值来定的 三、jQuery.clone() 作用同上 源码： jQuery.extend( {...bug，主要是在fixInput()方法上进行处理 （2）从目标节点克隆数据、添加事件给克隆的元素 （3）将克隆的元素中的script标签设为已运行 四、fixInput() 作用： （1）解决 IE...五、cloneCopyEvent() 作用： $().clone()的关键方法，用来从目标节点克隆数据、添加事件给克隆的元素 注意： jQuery 采用数据分离的方法来保存 DOM 上的事件和数据，利用...uuid 标记每个 DOM 元素，然后在内存上，将每个 DOM 元素相关的数据放到内存中，然后在 uuid 和内存的数据之间建立映射。

    3K20

    JQuery 入门学习(二)

    web前端 Jquery     时隔几天，天气依旧炎热，不过坐在空调房里的我一点也感觉不到~(笑)。我的事也在稳步进行着，这个下午继续我上一篇的Jquery。    ...说明 Jquery选择器 选择的元素举例 类似的css语法 选择第一个id=xxx的元素 $("#main") div id="main">div> #main { } 选择所有class=xxx...事件详解     在很多Jquery代码中，我们总是能看到是这样的形式： $(document).ready(function(){ //Jquery代码 });     所有的代码被套在了最外层的...我上次也提到了，ready是一个事件。我们上面说的选择器，它选择某元素的作用，其实就是为了完成后面的工作。...我也列举一些常用的html操作方法（更详细地在w3school中查看） 方法 举例 例子说明 html() var txt = $("div#main").html(); id=main的div元素，

    1.6K10

    浅谈JavaScript

    2、jQuery的作用 jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单...函数库 jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果 jQuery的优点就是兼容主流浏览器，代码编写更加简单 jQuery的用法 提示：jQuery官网：https://code.jquery.com...事件属性设置了也个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的window.onload更快。...prop方法来完成 获取和设置元素的value属性可以通过val方法来完成，更加方便 jQuery事件 1、常用事件 click（）鼠标点击 blur（）元素失去焦点 focus（）元素获得焦点 mouseover...），把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

    3.6K30

    Bootstrap幻灯轮播如何支持触屏左右滑动手势？

    bootstrap是封装好的框架，需要某些功能只需调用相应的组件就可以，但有些还是没加入，比如幻灯轮播触屏左右滑动手势就不支持，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢...一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js，我们在head...下面是幻灯片的原始html代码 div data-ride="carousel" class="carousel slide" id="carousel-example-generic">...document.getElementById('carousel-example-generic') var hm=new Hammer(myElement); hm.on("swipeleft...需要注意的是，jquery版本最好是1.9版本的jquery-1.9.1.min.js，否则可能在电脑上可以实现手势滑动，而在手机上无法触摸滑动 　　javascript命令这个是关键，不会写不会改就不好玩了

    4.4K50

    JS的面试题（一）

    对象 instanceof 构造函数 返回值为true或false function A(){ } var a = new A() //instanceof A.protptype是否在a的原型链上 真实作用...对象.isPrototypeOf(对象) 返回true或者false 真实作用：a是否在b的原型链上 20.如何设置一个对象的__proto__指向 var a = {x:1,y:2} var b...45、列举jquery的ajax请求，并说明作用 (“div”).load() 加载文档 .get() 获取数据 .post()传递数据 .getScript() 加载js文件 .getJSON()...abc ，父元素的兄弟元素中第一个子元素文字设置为红色，最后一个子元素文字设置为蓝色，父元素的下一个元素逐渐消失之后，在父元素后面增加一个class为newDom的div $(this).click...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时的命名，之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素在文档中的位置？

    95410

    如何编写一个jQuery插件

    在插件函数的立即作用域中，关键字 this 指向调用插件的 jQuery 对象。这是个经常出错的地方，因为有些情况下 jQuery 接受一个回调函数，此时 this 指向原生的 DOM 元素。...因此，若插件无需真正的返回值，你应该一直在插件函数的立即作用域中返回 this 关键字。同样，如你所想，调用插件时的参数会被传递到插件函数的立即作用域中。...如果你的插件要绑定事件，最好为其定义名称空间。这样，回头想 unbind 的时候就不会影响到相同事件类型上的其它已绑定事件。要为事件定义名称空间，把 "....$('#fun').tooltip('destroy'); 在本例中，当 tooltip 被 init 方法初始化的时候，它把 reposition 方法绑定到 window 对象的 resize 事件上...这使得我们可以安全的地解除本插件的事件绑定，避免意外影响插件之外绑定的事件。 数据 插件开发中，你可能经常需要维护状态，或检查你的插件是否已在给定元素上做过初始化。

    1.2K30

    jQuery基础

    > jQuery的核心函数 jQuery的核心函数就是$() 有以下作用： 1.接收一个函数 2.接收一个字符串：接收一个字符串的选择器；接收一个字符串代码片段 3.接收一个DOM元素 示例如下...如果是设置：找到多少个元素就会设置多少个元素 如果是设置：如果设置的节点不存在，系统会自动新增,全部新增 2.prop的作用和attr相似 区别:当判断控件是否被选上时...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 为什么要事件委托 新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */...什么是事件委托： 可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 应用了冒泡原理*/ $("ul

    2.2K20

    jQuery之事件绑定到触发全过程及知识点补充

    的事件绑定为何不直接绑定在目标元素身上，而是元素和事件分离？...可以看到 jQuery的事件和触发事件的handler是分离的， 事件集合 存在 事件缓存dataPriv的events上， //获取数据缓存 elemData = dataPriv.get( elem...( elem, arguments ) } } 可以看到，针对同一类型的事件（如click），重复绑定不会再创建新的内存（new Object会有新内存），而是在events里添加新的绑定事件。...五、guid的作用？ 添加guid的目的是因为handler没有直接跟元素节点发生关联，所以需要一个索引来寻找或者删除handler 六、命名空间namespace的作用？...trigger的机制去触发click事件， 正是因为jQuery没有直接把事件相关的handler与元素直接绑定，而是采用了分离处理， 所以我们通过trigger触发click事件与addEventListener

    1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券