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. @FunctionalInterface

    >> 函数式接口也称为SAM接口 Single Abstract Method interfaces 接口有且仅有一个抽象方法 允许定义静态方法 允许定义默认方法 允许java.lang. ...

  2. jquery spa

    1.hashchange监听 2.根据url加载不同页面 $.ajax({ url:"/xx/xx.html" type:"get", dataType:&qu ...

  3. C语言实现截屏

    实现手机控制电脑执行部分功能需要获取桌面状态,在网上找的一段截屏代码 /** * GDI 截屏函数 * 参数 hwnd 要截屏的窗口句柄 * 参数 dirPath 截图存放目录 * 参数 filena ...

  4. CTF实战（隐写术）：欢迎来到地狱

    前言:请登录实验吧开启刷题模式,拿到的flag返回该网站验证正确性. 下载“欢迎来到地狱”CTF题目(总共三个文件

  5. Flask - 安装,仪式, 返回, 和 请求

    目录 Flask - 第一篇 安装,仪式, 返回, 和 请求 一. Flask 的安装 和 程序员仪式 安装 程序员仪式 二. Flask 的返回值 三. Flask 请求request Flask ...

  6. BZOJ 4430 Guessing Camels赌骆驼

    [题意概述] 给出三个n的排列,求有多少个数对在三个排列中顺序相同 [题解] 考虑用补集转化的方法,答案为总对数-不满足的对数 一对数不满足条件,当且仅当这对数在两个排列中顺序相同,在另一个排列中的顺 ...

  7. C#关键字详解第四节

    位 Unicode 字符 char在C#中与C语言不同,他表示的是16位无符号进制的数,在计算机中他是被用来存储字符但是他只能用来存 储一个文字,与string不同string可以存储多个文字或字符, ...

  8. Industrial Nim

    http://codeforces.com/contest/15/problem/C 题意: 现有n个采石场,第i个采石场有mi堆石子 各堆分别有xi,xi+1……,xi+m-1颗石子 两名选手使用最 ...

  9. 洛谷——P2925 [USACO08DEC]干草出售Hay For Sale

    https://www.luogu.org/problem/show?pid=2925 题目描述 Farmer John suffered a terrible loss when giant Aus ...

  10. 洛谷 P2195 HXY造公园

    P2195 HXY造公园 题目描述 现在有一个现成的公园,有n个休息点和m条双向边连接两个休息点.众所周知,HXY是一个SXBK的强迫症患者,所以她打算施展魔法来改造公园并即时了解改造情况.她可以进行 ...