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? ...
随机推荐
- HDU 2414 Chessboard Dance（模拟题，仅此纪念我的堕落）
题目 模拟题也各种wa,我最近真的堕落了,,,,,智商越来越为负数了!!!!!!!! #include<stdio.h> #include<string.h> #include ...
- 原型链、构造函数、箭头函数、se6数组去重
原型链 例子如下: var arr = [1, 2, 3]; 其原型链为:arr ----> Array.prototype ----> Object.prototype ----> ...
- JS练习：商品的左右选择
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- camera placement (paraview)
# 'renderView1' is the view name# current camera placement for renderView1 renderView1.CameraPositio ...
- 搭建 Seafile 专属网盘
准备域名 任务时间:15min ~ 20min 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频. 视频 - 在腾讯云上购买域名 域名解析 域名购买完成后, 需要将域名解析到实验 ...
- 【模板】RMQ问题 ST表
洛谷3865 #include<cstdio> #include<algorithm> #include<cmath> using namespace std; ; ...
- BUAA_OO_博客作业一
BUAA_OO_博客作业一 (一)程序结构分析 1.代码统计 第一次作业 第二次作业 第三次作业 代码复杂度展示第三次作业的 method ev(G) iv(G) v(G) Constant.Cons ...
- CodeForcesGym 100735B Retrospective Sequence
Retrospective Sequence Time Limit: Unknown ms Memory Limit: 65536KB This problem will be judged on C ...
- [BZOJ 3221][Codechef FEB13] Obserbing the tree树上询问
[BZOJ 3221]Obserbing the tree树上询问 题目 小N最近在做关于树的题.今天她想了这样一道题,给定一棵N个节点的树,节点按1~N编号,一开始每个节点上的权值都是0,接下来有M ...
- toj 1421
题意:假如存在矩阵A,A[i][0] + A[i][1] + ...... + A[i][n - 1] == SR[i],A[0][j] + A[1][j] + ...... + A[n - 1][j ...