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. 新手入门学习angular.js的心得体会

    看了一天的angular.js,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知 ...

  2. luogu P1775 古代人的难题_NOI导刊2010提高（02）（斐波纳契+数学）

    题意 已知x,y为整数,且满足以下两个条件: 1．x,y∈[1…k],且x,y,k∈Z 2.(x^2-xy-y^2)^2=1 给你一个整数k,求一组满足上述条件的x,y并且使得x^2+y^2的值最大. ...

  3. (C/C++学习)7.数组及其访问方式

    说明:数组的数据类型是一种构造类型,而存储数组的内存是一段连续的存储区域.数组的数据类型决定了连续内存的访问方式,它包括数组的三要素:起始地址.步长以及元素个数. 一.一维数组 1.形式:type 数 ...

  4. JS练习：定时弹出广告

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  5. Python os.listdir() 方法

    概述 os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表.这个列表以字母顺序. 它不包括 '.' 和'..' 即使它在文件夹中. 只支持在 Unix, Windows 下 ...

  6. 746. Min Cost Climbing Stairs(动态规划）

    On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you pay ...

  7. jdk8--十大新特性

    https://www.cnblogs.com/dennyzhangdd/p/6722445.html 一.十大特性 1.Lambda表达式 2.Stream函数式操作流元素集合 3.接口新增:默认方 ...

  8. max_element()与min_element()

    #include<iostream>#include<algorithm>using namespace std;bool cmp(int i,int j){ return i ...

  9. SVG格式图片转成HTML中SVG的Path路径

    AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...

  10. Master Nginx(8) - Troubleshooting Techniques

    Analyzing log files Error log file formats Error log file entry examples Configuring advanced loggin ...