javascript事件绑定1-模拟jquery可爱的东西
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可爱的东西的更多相关文章
- 第一百二十一节，JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- javaScript事件绑定
事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...
- 详解javascript事件绑定使用方法
由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...
- javascript事件绑定和普通事件的区别
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript 事件绑定
一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...
- JavaScript事件绑定的常见方式
在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...
随机推荐
- is_NaN的使用
原生js中使用判断某个值是否是数值,有且只有一个方法就是is_NaN. 原理:这个函数使用了Number() 去转换需要判断的值.Number() 去转换值,如果有任意非数值字符存在则就不是一个数值. ...
- Vova and Trophies CodeForces - 1082B(思维题)
Vova has won nn trophies in different competitions. Each trophy is either golden or silver. The trop ...
- scrapy实例matplotlib脚本下载
利用scrapy框架实现matplotlib实例脚本批量下载至本地并进行文件夹分类:话不多说上代码: 首先是爬虫代码: import scrapy from scrapy.linkextractors ...
- 几个有用的shell命令
1.!$ 是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkdir my ...
- group by语句，聚合函数与其他语句（关系，执行过程）
(本文一切基于SQL SERVER 2008 R2) 先来看一个语句执行过程发生的错误提示: 消息 8120,级别 16,状态 1,第 2 行 选择列表中的列 'SC.CNO' 无效,因为该列没有包含 ...
- [bzoj1455]罗马游戏_左偏树_并查集
罗马游戏 bzoj-1455 题目大意:给你n个人,2种操作,m次操作:1.将i号士兵所在的集合的最小值删除 2.合并i和j两个士兵所在的团体 注释:$1\le n\le 10^6$,$1\le m ...
- mybatis sql语句#{}和${}区别联系
1.说白了就是,#{}用于引用字符变量,如varchar,string.因为sql语句执行过程中要给string varchar加‘’来执行. 2.${}用来引用int型等不需要添加单引号的值 3.具 ...
- IntelliJ IDEA 给表达式赋变量名称
IntelliJ IDEA 给表达式赋变量名称 学习了:http://blog.csdn.net/tiny__wang/article/details/52988790 类似于Eclipse中的ctr ...
- 动态配置 JBOSS ( eap 6.2 ) 数据源
操作环境 windows + jboss eap 6.2 + MyEclipse 10.0 项目用的是jboss eap 6.2,作为Red公司升级后的eap稳定版. 相比之前的 AS 系列,不管是安 ...
- WebGIS开发技术杂谈
WebGIS项目的开发主要是B/S架构.最流行的是clientjavascript,server端java. 另外还有flexclient. client主要完毕用户交互.向server端发送请求并传 ...