1、给对象添加事件attachEvent(兼容IE，不兼容ff、chrome)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>事件绑定</title>

    <script type="text/javascript">

        window.onload = function () {

            var btn1 = document.getElementById('btn1');

           //attachEvent给对象绑定事件，兼容IE，不兼容FF,chrome

            //第一个参数是绑定的事件每次,第二个参数是function

            btn1.attachEvent("onclick", function () {

               alert("我在IE上蹦蹦跳!");

            });

        }

    </script>

</head>

<body>

    <input type="button" value="绑定" id="btn1" />

</body>

</html>

不兼容FF、chrome

　　

2、兼容FF、chrome(IE9及以上也兼容)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>事件绑定</title>

    <script type="text/javascript">

        window.onload = function () {

            var btn1 = document.getElementById('btn1');

            //#region 兼容IE

//            btn1.attachEvent("onclick", function () {

//                alert("我是IE蹦蹦跳");

//            });

            //#endregion

            //addEventListener(事件名称但是没有"on"前缀,绑定的function,是否进行捕获(一般是false))

            btn1.addEventListener("click", function () {

                alert("我是FF、Chrome蹦蹦跳,IE9及以上也兼容");

            },false);

        }

    </script>

</head>

<body>

    <input type="button" value="绑定" id="btn1" />

</body>

</html>

3、兼容FF、chrome、ie

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>事件绑定</title>

    <script type="text/javascript">

        window.onload = function () {

            var btn1 = document.getElementById('btn1');

            if (btn1.attachEvent) {//如果是IE

                btn1.attachEvent("onclick", function () {

                    alert("我是IE蹦蹦跳");

                });

            }

             else{//如果是非IE

                btn1.addEventListener("click", function () {

                    alert("我是FF、Chrome蹦蹦跳,IE9及以上也兼容");

                }, false);

            }

        }

    </script>

</head>

<body>

    <input type="button" value="绑定" id="btn1" />

</body>

</html>

 4、封装起来

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>事件绑定</title>

    <script type="text/javascript">

        window.onload = function () {

            var btn1 = document.getElementById('btn1');

            addEvent(btn1, 'click', function () { alert("我居然被包养了！！！"); });

            addEvent(btn1, 'click', function () { alert("我居然被封装了！！！"); });

        }

        //obj：绑定的对象，eventName：事件名称，fn：函数

        function addEvent(obj, eventName, fn) {

            if (obj.attachEvent) {

                obj.attachEvent('on' + eventName, fn);

            }

            else {

                obj.addEventListener(eventName, fn, false);

            }

        }

    </script>

5、小小模拟jquery

     $(function () {

            alert("sss");

        });

        function $(paramArgs) {

            return new myQuery(paramArgs);

        }

        function myQuery(paramArgs) {

            var argType = typeof paramArgs;

            switch (argType) {

                case "function":

                    addEvent(window, "load", paramArgs);

                    break;

            }

        }

 6、事件绑定应用：

执行结果

javascript事件绑定1-模拟jquery可爱的东西的更多相关文章

  1. 第一百二十一节，JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  2. Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  3. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  4. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  5. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  6. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  7. javascript事件绑定和普通事件的区别

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  8. javascript 事件绑定

    一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...

  9. JavaScript事件绑定的常见方式

    在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...

随机推荐

  1. C# 泛基

    1 你有时候希望在父类规定一些行为,让子类无法修改,但是这些实现是依赖一个子类才能获取的值,你又不可能知道所有的子类 ,没办法替它在父类里面初始化,这时候就需要在父类里面定义一个每个子类一个的,但又是 ...

  2. [系统资源攻略]CPU使用率和负载

    我们在搞性能测试的时候,对后台服务器的CPU利用率监控是一个常用的手段.服务器的CPU利用率高,则表明服务器很繁忙.如果前台响应时间越来越大,而后台CPU利用率始终上不去,说明在某个地方有瓶颈了,系统 ...

  3. os、sys模块

    os模块 os模块是与操作系统交互的一个接口 os.makedirs("dirname1/dirname2") # 可生成多层递归目录 os.removedirs("di ...

  4. 搭建 Seafile 专属网盘

    准备域名 任务时间:15min ~ 20min 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频. 视频 - 在腾讯云上购买域名 域名解析 域名购买完成后, 需要将域名解析到实验 ...

  5. 学习记录--如何将exec执行结果放入变量中？

    declare @num int, ) set @sqls='select @a=count(*) from tb ' exec sp_executesql @sqls,N'@a int output ...

  6. 【[Offer收割]编程练习赛12 A】歌德巴赫猜想

    [题目链接]:http://hihocoder.com/problemset/problem/1493 [题意] [题解] 枚举P从2..n/2 如果P是质数且N-P也是质数; 则输出P和N-P就好; ...

  7. Linux中安装MongoDB出现的问题记录

    mongoDB安装完成后,运行sudo service mongod start 查看程序状态:ps ajx | grep mongod   ,启动失败 查看失败信息提示,终端命令:tail -f / ...

  8. poj3233 题解 矩阵乘法 矩阵快速幂

    题意:求S = A + A2 + A3 + … + Ak.(mod m) 这道题很明显可以用矩阵乘法,但是这道题的矩阵是分块矩阵, 分块矩阵概念如下:当一个矩阵A中的单位元素aij不是一个数值而是一个 ...

  9. Bran的内核开发指南_中文版

    http://www.cnblogs.com/liloke/archive/2011/12/21/2296004.html 最近在看<orange’s>一书,有点想自己写一个轻量级OS的想 ...

  10. jq 抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...