原生js事件的添加和删除的封装

2024-12-02 10:32:53

在IE浏览器中添加或删除事件用attachEvent、detachEvent。在其他标准浏览器中则用addEventListener、removeEventListener。下面的对事件的添加和删除做了封装。直接看代码吧！

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

其他补充关于addEventListener第三个参数的含义

addEventListener的第三个参数

W3C DOM里用来新增触发事件的函数叫AddEventListener，不过我一直不知道这个函数的第三个参数是要做什么用的，总是随便设，也没发现差异再哪，前两天看ppk on javascript终于看到说明了，至于很久以前就有的DOM的标准文件，我其实根本没去找过这个参数的资讯。

这个参数叫做useCapture，是一个boolean值，就是true or false，如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false，而会有影响的情形是目标元素(target element)有祖先元素(ancestor element)，而且也有同样的事件对应函数，我想，看图会比较清楚。

范例有两层的div方块

像这张图所显示的，我的范例有两层div元素，而且都设定有click事件，一般来说，如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件，还会同时触发红色元素的click事件，而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false，那就会使用bubbling，他是从内而外的流程，所以会先执行蓝色元素的click事件再执行红色元素的click事件，如果是true，那就是capture，和bubbling相反是由外而内，会先执行红色元素的click事件才执行蓝色元素的click事件。附上两个范例，capture和bubbling，两个档案只有差在此一参数不同，可以发现事件的发生顺序不一样了。

那如果不同层的元素使用的useCapture不同呢？就是会先从最外层元素往目标元素寻找设定为capture的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling的事件。

使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

PC 移动端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹门面模式复制代码代码如下: window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) { insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '
原生Js实现按的数据源均分时间点幻灯片效果(已封装)

建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角. 实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例复制代码代码如下: var JS
原生Javascript封装的一个AJAX函数分享

最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ
原生js封装二级城市下拉列表的实现代码

闲的蛋疼,封装了个二级城市下拉先保证html里有 <SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 > </select> <select id="city" style="width:60px"> </select> <input type
原生JS封装Ajax插件(同域、jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.
封装的原生javascript弹出层代码

复制代码代码如下: <script type="text/javascript">// <![CDATA[ /* @author: hongru.chen ** @date: 2010-09-15 ** @vision: 1.1 */ var Hongru = {}; function $(id){return document.getElementById(id)} Object.prototype.extend = function(target, /*opti
原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f
原生js事件的添加和删除的封装

在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做了封装.直接看代码吧! /** * @description 事件绑定,兼容各浏览器 * @param target * 事件触发对象 * @param type * 事件 * @param func * 事件处理函数 */ function bind(target, type, func) { i
原生JS实现动态添加新元素、删除元素方法

1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态添加新元素</title> </head> <body> <ul class="example"> <li class="child">Coffee</li> <li c
浅谈react.js 之批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮添加按钮的事件被添加组件存放的容器做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把
原生JS实现图片无缝滚动方法(附带封装的运动框架)

话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动定时器:每隔 2s 自动播放主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:
原生js仿jquery实现对Ajax的封装

前言与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu
原生js实现查找/添加/删除/指定元素的class

复制代码代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasCla
原生js添加一个或多个类名的方法分析

本文实例讲述了原生js添加一个或多个类名的方法.分享给大家供大家参考,具体如下: 好吧今天写个js,不知道怎么添加类名了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"
初学js 新节点的创建删除的步骤

特羡慕写出这些特效的高级程序员.我想学习,可总是不知道怎么去思考,不知道怎么去逻辑.有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的.但是我过不了自己这关了,自己最大的缺点就是逃避,不会做的就放弃了,不会了就不会了,也不敢问了.改,这个大缺点一定得改.以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高..废话就不扯了,言归正传: 题目:btton 按钮一个添加一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删
原生JS发送异步数据请求

在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请求.这时候无非有两种请求方式,一种是AJAX,另一个是JSONP.通过原生JS对异步请求进行简单的封装. AJAX AJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据.AJAX的技术核心是XMLHttpRequest对象,主要请求过程如下: 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystat
深入分析原生JavaScript事件

JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一下了. 首先声明,小菜懂的也不是很多,只是把我的思路和大家分享一下. DOM0事件模型事件模型在不断发展,早期的事件模型称为DOM0级别. DOM0事件模型,所有的浏览器都支持. 直接在dom对象上注册事件名称,就是DOM0写法,比如: 复制代码代码如下: document.getElement

原生js事件的添加和删除的封装

相关推荐

随机推荐