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? ...
随机推荐
- 洛谷——P1757 通天之分组背包
P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...
- lua_note_01_lua介绍
1. lua 1. lua 1.1. lua介绍 1.2. Lua 特性 1.3. 特点 1.4. Lua 应用场景 1.5. 环境搭建 1.6. VS lua 1.1. lua介绍 Lua 是一种轻 ...
- 00106_UDP通信
1.DatagramPacket (1)JDK中提供了一个DatagramPacket类,该类的实例对象就相当于一个集装箱,用于封装UDP通信中发送或者接收的数据: (2)在创建发送端和接收端的Dat ...
- mysql 数据的某个范围数据
select * from table_name where limit num1, num2; num1 : 开始条目 num2 :选择数目
- 用c++编程：用两个栈实现队列
栈s1和栈s2,栈s1专门为入队,栈s2专门为出队. 入队: 当s1和s2都为空时,直接入队s1. 当s1为空,s2不为空时,把s2的元素都倒回s1,然后再入队s1 出队: 当s2不为空时,直接出队s ...
- Oracle-统计数据库表数据总数量
create or replace procedure prc_table_count(p_flag out varchar2) AS TCOUNT number; SCOUNT number; CO ...
- linux环境下安装varnish
Varnish是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang 使用3台Varnish代替了原来的12台Squid,性能比以前更好. sudo apt-get insta ...
- Clojure：解决korma中mysql utf8的问题
当使用korma内置的mysql方法时,无法添加utf-8的支持.解决的方法就是重写mysql方法,代码如下: (defn mysql "改编自korma,添加了utf-8的支持" ...
- 关于创建Android Library所须要知道的一切
关于创建Android Library所须要知道的一切 Android 库(Library)在结构上与 Android 应用模块同样.应用模块所能够包括的东西.在库中都同意存在,包括代码文件.资源文件 ...
- Gevent的协程实现原理
之前之所以看greenlet的代码实现,主要就是想要看看gevent库的实现代码. .. 然后知道了gevent的协程是基于greenlet来实现的...所以就又先去看了看greenlet的实现... ...