模拟jQuery--获取事件的封装

从使用jQuery到写原声js,逐步到自己封装框架。敲出我的模拟jQuery路程~~~satar

封装我们的绑定事件以及解除绑定事件————兼容ie低版本

$ = {
    //绑定事件
    on: function (dom, type, fn) {
        var dv = document.getElementById(dom);
        if (document.addEventListener) {
            //标准组织
            dv.addEventListener(type, fn, false);
        } else {
            //ie
            if (document.attachEvent) {
                dv.attachEvent(‘on‘ + type, fn);
            }
        }
    },
    //解除绑定
    un: function (id, type, fn) {
        var dv = document.getElementById(id);
        //标准组织
        if (document.removeEventListener) {
            dv.removeEventListener(type, fn, false);
        } else {
            //ie
            if (document.detachEvent) {
                dv.detachEvent(‘on‘ + type, fn);
            }
        }
    },
    //click单击事件
    click: function (id, fn) {
        this.on(id, ‘click‘, fn)
    },

    //mouseover鼠标经过事件
    mouseover: function (id, fn) {
        this.on(id, ‘mouseover‘, fn)
    },

    //mouseout鼠标离开事件
    mouseout: function (id, fn) {
        this.on(id, ‘mouseout‘, fn)
    }
}
时间: 2024-10-06 04:49:36

模拟jQuery--获取事件的封装的相关文章

模拟jQuery库

用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>simulationJquery.html</title> </head><body> <img src=images/123.jpg/> <input id="hide" type="but

js框架封装,模拟jQuery封装

模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素:其后设置入口函数jQuery,返回一个F的实例:然后对jQuery.prototype进行设置:其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery:二:jQuery.fn.extend = jQuery.extend = function(){}通过向jQue

模拟jQuery简单封装ajax

1 /*模拟jQuery的写法 (简单写法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5 /* 6 * 请求 7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径 9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 10 * 4.提交数据 data 默认的是对象 {nam

jQuery 高级事件(模拟操作)

一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击 //点击按钮事件 $('input').click(function(){ alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('input').click(function(){ alert('我的第一次点击来自模拟!'); }).trigger('

ajx技术解析以及模拟jQuery封装

1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String username = request.getParameter("username"); String password = request.getParameter("password&q

使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta ht

jquery 绑定事件 获取方式 --------------data event 获取

//绑定事件 bind event $("body").on("click",function(){ console.log("in") }) //获取事件 jQuery._data($("body")[0], "events").click[0].handler

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery动态绑定事件(简单模拟二级联动效果)

绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3